fijar - tamaño fijo celdas tabla html

¿Establecer la constante de ancho de columna de la tabla independientemente de la cantidad de texto en sus celdas?

Question

En mi tabla, establezco el ancho de la primera celda en una columna para que sea de 100px .
Sin embargo, cuando el texto en una de las celdas de esta columna es demasiado largo, el ancho de la columna es más de 100px . ¿Cómo podría deshabilitar esta expansión?

Answer 1

Consulte: http://www.html5-tutorials.org/tables/changing-column-width/

Después de la etiqueta de la tabla, use el elemento col. No necesitas una etiqueta de cierre.

Por ejemplo, si tuvieras tres columnas:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Answer 2

Encontré que la respuesta de KAsun funciona mejor usando vw en lugar de px así:

<td><div style="width: 10vw" >...............</div></td>

Este fue el único estilo que necesitaba para ajustar el ancho de la columna

Answer 3

Haga que la respuesta aceptada responda para pantallas pequeñas cuando sea más pequeño que el ancho fijo.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Answer 4

Jugué un poco con él porque tuve problemas para entenderlo.

Necesitas establecer el ancho de la celda (ya sea th o td trabajado, yo establezco ambos) Y establecer el table-layout la table-layout en fixed . Por alguna razón, el ancho de la celda parece mantenerse fijo si el ancho de la tabla también está establecido (creo que es una tontería, pero no importa). También es útil establecer la propiedad de desbordamiento en oculto.

Debes asegurarte de dejar todos los límites y el tamaño de CSS, también.

Ok, así que esto es lo que tengo.

html:

<table>
   <tr>
      <th>header 1</th>
      <th>header 234567895678657</th>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
</table>

CSS:

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

th, td {
    border: 1px solid black;
    width: 100px;
}

Aquí está en JSFiddle

Este tipo tenía un problema similar: anchos de celda de tabla : ancho de fijación, ajuste / truncado de palabras largas

Answer 5

KAsun tiene la idea correcta. Aquí está el código correcto ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Answer 6

Lo que hago es:

1. Establecer el ancho td:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. Establecer el ancho td con CSS:

   <td style="width:200px; height:50px;">

3. Establecer el ancho de nuevo como máximo y mínimo con CSS:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Suena un poco repetitivo pero me da el resultado deseado. Para lograr esto con mucha facilidad, es posible que necesite poner los valores de CSS en una clase en su hoja de estilo:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

entonces:

<td class="td_size">

Coloque el atributo de clase en cualquier <td> que desee.

Answer 7

Necesitas escribir esto dentro del correspondiente CSS.

table-layout:fixed;

Answer 8

No es necesario configurar "fixed" ; todo lo que necesita es configurar el overflow:hidden desde que se estableció el ancho de la columna.

Answer 9

Según mi respuesta here , también es posible usar una cabecera de mesa (que puede estar vacía) y aplicar anchos relativos para cada celda de cabecera de mesa. Los anchos de todas las celdas en el cuerpo de la tabla se ajustarán al ancho de la cabeza de su columna. Ejemplo:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Ver resultado

Alternativamente, use colgroup como se sugiere en la respuesta de Hyathin.

Answer 10

Si necesita una o más columnas de ancho fijo, mientras que otras columnas deben cambiar de tamaño, intente establecer el min-width max-width en el mismo valor.

Answer 11

Si no desea un diseño fijo, especifique una clase para que la columna tenga el tamaño adecuado.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

Answer 12

Solo agregue la etiqueta <div> dentro de <td> o <th> defina el ancho dentro de <div> . Esto te ayudara. Nada más funciona.

p.ej.

<td><div style="width: 50px" >...............</div></td>

Answer 13

También ayuda, para poner en la última "celda de relleno", con ancho: automático . Esto ocupará el espacio restante, y dejará todas las demás dimensiones según lo especificado.

Answer 14

Usé esto

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}