Si solo desea que la tabla se diseñe automáticamente
Sin usar max-width
, o anchos de columna de porcentaje, o table-layout: fixed
etc.
https://jsfiddle.net/tturadqq/
Cómo funciona:
Paso 1: solo deja que el diseño automático de la tabla haga lo suyo.
Cuando hay una o más columnas con mucho texto, reducirá las otras columnas tanto como sea posible, luego envolverá el texto de las columnas largas:

Paso 2: Envuelva el contenido de la celda en un div, luego configure ese div en max-height: 1.1em
(el 0.1em adicional es para caracteres que se muestran un poco por debajo de la base de texto, como la cola de 'g' y 'y')

Paso 3: Establecer title
en los divs
Esto es bueno para la accesibilidad, y es necesario para el pequeño truco que usaremos en un momento.

Paso 4: agregue un CSS ::after
en el div
Esta es la parte difícil. Establecemos un CSS ::after
, con content: attr(title)
, luego lo colocamos encima del div y establecemos text-overflow: ellipsis
. Lo he coloreado de rojo aquí para que quede claro.
(Observe cómo la columna larga ahora tiene puntos suspensivos)

Paso 5: establece el color del texto div en transparent
¡Y hemos terminado!

Cameron Price-Austin
fuente
overflow
bien. Intenta poner un div en la celda y diseñar ese div.