Ancho fijo de celda de tabla

Mucha gente todavía usa tablas para diseñar controles, datos, etc., un ejemplo de esto es el popular jqGrid. Sin embargo, está ocurriendo algo de magia que no puedo entender (sus tablas para gritar en voz alta, ¿cuánta magia podría haber?)

¿Cómo es posible establecer el ancho de columna de una tabla y hacer que se 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?

Puede intentar usar la <col>etiqueta administrar el estilo de la tabla para todas las filas, pero deberá establecer el table-layout:fixedestilo en la <table>clase css de las tablas y establecer el overflowestilo 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; }

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>

Necesitas poner la mesa widthincluso en la solución de haunter . De lo contrario no funciona.
También una nueva característica CSS3 que VSYNC sugerido es: word-break:break-all;. Esto también dividirá las palabras sin espacios en varias líneas. Simplemente modifique el código de esta manera:

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

Resultado final

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

Tenía una larga celda de tabla td, esto forzó la mesa a los bordes del navegador y se veía fea. Solo quería que esa columna tuviera un tamaño fijo y separara las palabras cuando alcanzara 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 para la tabla, los elementos tr. También puede usar desbordamiento: oculto; como lo sugieren otras respuestas, pero hace que el texto en exceso desaparezca.

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

10x10

para la tabla de ancho de PANTALLA COMPLETA:

• el ancho de la mesa DEBE ser 100%

• si necesita N colunms, entonces DEBE ser N + 1

ejemplo para 3 columnas:

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

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

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

: primer hijo ...: enésimo hijo (1) o ...