Establecer la constante de ancho de columna de la tabla, independientemente de la cantidad de texto en sus células?

Question

En mi mesa que establece el ancho de la primera celda de una columna para ser 100px.
Sin embargo, cuando el texto en una de las células en esta columna es demasiado largo, el ancho de la columna se convierte en más de 100px. ¿Cómo podría desactivar esta expansión?

Answer 1

Me jugado con él durante un rato porque tenía problemas para comprender.

Deberá ajustar el ancho de las celdas (ya sea th o td trabajado, me puse ambos) y establecer el table-layout a fixed. Por alguna razón, la célula ancho parece estar alojados sólo fija si la tabla de ancho se establece, también (creo que es tonto, pero whatev).

Además, es útil para establecer la propiedad overflow a hidden para evitar cualquier texto adicional se salga de la mesa.

Usted debe asegurarse de que dejar toda la limítrofes y dimensionamiento de CSS, también.

La autorización así que esto es lo que tengo:

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

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

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

Aquí está en jsFiddle

Este tipo tenía un problema similar: anchos de celda de la tabla - la fijación de anchura, envasado / truncar palabras largas

Answer 2

Ver: http://www.html5-tutorials.org/tables/changing-column- ancho /

Después de la etiqueta de la tabla, utilizar el elemento col. usted no necesita una etiqueta de cierre.

Por ejemplo, si tiene tres columnas:

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

Answer 3

Sólo tiene que añadir la etiqueta <div> <td> dentro o <th> definir <div> anchura interior. Esto te ayudara. Nada más funciona.

por ejemplo.

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

Answer 4

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

Answer 5

Es necesario escribir este dentro de la CSS correspondiente

table-layout:fixed;

Answer 6

Lo que hago es:

1. Set la anchura td:

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

2. Configurar el ancho td con CSS:

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

3. Set la anchura de nuevo como max y min con CSS:

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

Suena poco repetitivo poco, pero me da el resultado deseado. Para lograr esto con mucha facilidad, puede ser necesario poner los valores 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*/   
}

a continuación:

<td class="td_size">

Coloque el atributo de clase a cualquier <td> desea.

Answer 7

He utilizado este

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

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

Answer 8

También ayuda, para poner en la última "célula de relleno", con width: auto . Esto ocupará el espacio restante, y dejará todas las demás dimensiones que las especificadas.

Answer 9

Si no desea un diseño fijo, especificar una clase para la columna a ser de tamaño apropiado.

CSS:

.special_column { width: 120px; }

HTML:

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

Answer 10

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 11

Hacer responde la respuesta aceptada para las pequeñas pantallas cuando 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 violín

https://jsfiddle.net/w9s3ebzt/

Answer 12

Como por mi respuesta aquí , también es posible utilizar un cabeza tabla (que puede estar vacía) y aplicar anchuras relativas para cada celda cabeza tabla. Las anchuras de todas las células en el cuerpo de la tabla se ajustarán a la anchura de la cabeza de la 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

Por otra parte, el uso colgroup como se sugiere en la respuesta de Hyathin.

Answer 13

Configuración de esto:

style="min-width:100px;" 

funcionado para mí.

Answer 14

He encontrado la respuesta de KASUN funciona mejor usando vw en lugar de px , así:

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

Esta fue la única que diseña I necesitaba para ajustar el ancho de columna

Answer 15

No es necesario que establezca "fixed" -. Todo lo que necesita es establecer overflow:hidden ya que la columna de ancho se establece