Mucha gente todavía usa tablas para diseñar controles, datos, etc. Un ejemplo de esto es el popular jqGrid. Sin embargo, hay algo mágico que no puedo entender (sus tablas para gritar, ¿cuánta magia podría haber?)
¿Cómo es posible establecer el ancho de la columna de una tabla y hacer que obedezca como lo hace jqGrid? Si trato de replicar esto, incluso si configuro cada
¿Alguna idea o idea?
Puede intentar usar el estilo de la tabla
table-layout:fixed estilo table-layout:fixed en la
o las tablas clase css y establecer el estilo de overflow para las celdas
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
text text text
y este será tu CSS
table.fixed { table-layout:fixed; } table.fixed td { overflow: hidden; }
Ahora en HTML5 / CSS3 tenemos una mejor solución para el problema. En mi opinión, se recomienda esta solución puramente CSS:
table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/ table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/ table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/ table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/ table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
Veryverylongtext Actuallythistextismuchlongeeeeeer We should use spaces tooooooooooooo
table td { table-layout:fixed; width:20px; overflow:hidden; word-wrap:break-word; }
Tenía una larga celda de mesa, esto forzaba la mesa hasta los bordes del navegador y parecía fea. Solo quería que esa columna fuera de tamaño fijo y rompa las palabras cuando alcanza el ancho especificado. Así que esto funcionó bien para mí:
Text to break here
No necesita especificar ningún tipo de estilo a tabla, tr elementos. También puede usar desbordamiento: oculto; como lo sugieren otras respuestas, pero hace que desaparezca el exceso de texto.
table { table-layout:fixed; width:200px; } table tr { height: 20px; }
10×10
table { table-layout:fixed; } td,th { width:20px; word-wrap:break-word; }
: primer hijo …: nth-child (1) o …