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

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

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

Debe establecer el ancho de la celda (ya sea tho tdtrabajado, configuré ambos) Y establecer el table-layouta fixed. Por alguna razón, el ancho de la celda parece permanecer fijo si el ancho de la tabla también está configurado (creo que es una tontería, pero de todas formas).

Además, es útil establecer la overflowpropiedad hiddenpara evitar que salga texto adicional de la tabla.

También debe asegurarse de dejar todos los bordes y tamaños para CSS.

Ok, entonces 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 tabla : ancho de fijación, ajuste / truncamiento de palabras largas

Ver: 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 tuviera tres columnas:

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

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

p.ej.

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

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

Necesitas escribir esto dentro del CSS correspondiente

table-layout:fixed;

Lo que hago es:

1. Establecer el ancho de td:

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

2. Establezca el ancho de td con CSS:

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

3. Establezca el ancho nuevamente 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 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 a cualquiera <td>que desee.

Yo usé esto

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

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

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>

También ayuda, poner en la última "celda de relleno", con ancho: auto . Esto ocupará el espacio restante y dejará todas las demás dimensiones como se especifica.

Haga que la respuesta aceptada responda para pantallas pequeñas cuando sea más pequeña 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/

Configurando esto:

style="min-width:100px;" 

Trabajó para mi.

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>

Según mi respuesta aquí , también es posible usar un encabezado de tabla (que puede estar vacío) y aplicar anchos relativos para cada celda de encabezado de tabla. El ancho de todas las celdas en el cuerpo de la tabla se ajustará al ancho de su cabeza de 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 colgroupcomo se sugiere en la respuesta de Hyathin.

Uso un elemento :: after en la celda donde quiero establecer un ancho mínimo independientemente del texto presente, como este:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

No tengo que establecer el ancho en la tabla principal ni usar el diseño de tabla.

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

No es necesario configurarlo "fixed"; todo lo que necesita es configurarlo, overflow:hiddenya que el ancho de la columna está configurado.