Ancho fijo de celda de tabla

175

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?

Jimbo
fuente

Respuestas:

249

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; }
cazador
fuente
15
col no funcionaría en html5, establezca el ancho de td individual en su lugar mediante clases en línea css o css
Pankaj Phartiyal
10
La respuesta aceptada no funciona a menos que aplique explícitamente un ancho para la tabla deseada. Funciona perfectamente si usa una unidad o un porcentaje. Pensé en señalar esto ya que la respuesta de @ totymedli no obtuvo ningún voto y no quería que los usuarios lo ignoraran. Sin embargo, la sugerencia de salto de palabra no es necesaria a menos que eso sea a lo que apunta.
thebdawk05
¿Qué sucede cuando tiene filas con solo 1 elemento TD que abarca varias columnas? Usando su código de muestra, si tuviera <TD colspan="3">una fila sola, ¿sería 90px?
sab669
Gracias ayudó. Para la superposición de datos, agregue esto table.fixed td { word-wrap: break-word; }.
Parag Tyagi
La sugerencia de salto de palabra no es necesaria, pero es útil para el resto de usuarios de SO y bastante pertinente a la pregunta, ya que es casi seguro que ocurra desbordamiento de contenido en tablas de ancho fijo en la mayoría de los escenarios.
Amy Pellegrini
101

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

Tabla renderizada

totymedli
fuente
Si arroja una fila con un colspan, esto parece romper esta solución. ¿Alguna sugerencia sobre cómo utilizar esta solución con una tabla que contiene colspan> 1?
Eric K
@QuantumDynamix Solucioné esto incluyendo como primera fila, una fila sin colspans, solo todas las columnas individuales con anchos. Luego escondí esa fila con 0 altura, borde: ninguno, visibilidad: oculta, relleno: 0px, etc., luego la segunda fila es la primera que quiero ver donde hay colspans. La primera fila con celdas individuales de ancho fijo establece los anchos.
AaronLS
@totymedli ¿Alguna idea de cómo hacer que mi tabla tome la suma de todos los anchos de columna? Mi tabla se genera dinámicamente un poco y, por lo tanto, no puedo calcular de antemano el ancho de la tabla, pero no quiero usar el 100% porque eso estira algunos elementos.
AaronLS
14
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}
ajreal
fuente
9
¿Estás seguro de que puedes usar table-layoutun elemento td?
Nick
@ Nick: funciona bien. Sin embargo, también debo agregar la propiedad de ancho mínimo y ancho máximo (el mismo valor que el ancho), y luego se convirtió en un ancho realmente fijo.
Denis Khay
11

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.

Tarik
fuente
2
O puede usar ancho máximo en lugar de ancho donde sea necesario. Esto le permitirá no romper el texto a menos que alcance su límite de ancho. Y la celda de la tabla no tendrá espacio vacío si su texto es más pequeño que el ancho especificado. <td> <div style = 'max-width: 150px;'> Texto para dividir aquí </div> </td>
Tarik
1
table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

usuario1993774
fuente
0

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>

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

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

xhdix
fuente