tamaño - tablas anidadas html

Ancho de celda de tabla fijo

Question

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 <td style=''width: 20px''> , ¡tan pronto como el contenido de una de esas celdas sea mayor a 20px, la celda se expande!

¿Alguna idea o idea?

Answer 1

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.*/

<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Necesita establecer el width la tabla incluso en share . De lo contrario, no funciona.
También una nueva característica de CSS3 sugerida por vsync es: word-break:break-all; . Esto dividirá las palabras sin espacios en ellas en varias líneas también. Simplemente modifica el código de esta manera:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

Resultado final

Answer 2

Puede intentar usar el estilo de la tabla <col> administrar tablas para todas las filas, pero deberá establecer el table-layout:fixed estilo table-layout:fixed en la <table> 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

<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 será tu CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Answer 3

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í:

<td><div style=''width: 150px;''>Text to break here</div></td>

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.

Answer 4

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: primer hijo ...: nth-child (1) o ...

Answer 5

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Answer 6

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10