Mucha gente sigue utilizando tablas para maquetar controles, datos, etc. - Un ejemplo de esto es el popular jqGrid. Sin embargo, hay algo de magia que parece que no puedo entender (son tablas por el amor de Dios, ¿cuánta magia podría haber?)
¿Cómo es posible establecer el ancho de las columnas de una tabla y hacer que obedezca como lo hace jqGrid? Si intento replicar esto, incluso si establezco cada <td style='width: 20px'>
, en cuanto el contenido de una de esas celdas es mayor de 20px, ¡la celda se expande!
¿Alguna idea o idea?
Puedes intentar usar la etiqueta <col>
para gestionar el estilo de la tabla para todas las filas, pero tendrás que establecer el estilo table-layout:fixed
en la <table>
o la clase css de las tablas y establecer el estilo overflow
para las celdas
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
y este es tu CSS
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
table {
table-layout:fixed; width:200px;
}
table tr {
height: 20px;
}
10x10