Ancho de celda de tabla fijo

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

, ¡tan pronto como el contenido de una de esas celdas sea mayor a 20px, la celda se expande!

¿Alguna idea o idea?

Puede intentar usar el estilo de la tabla

administrar tablas para todas las filas, pero deberá establecer el 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 …