html - tablas - Impedir que el texto se sobreponga al ancho td de la tabla

td html significado

Question

¿Cómo puedo restringir la entrada de la tabla <td> a expandir en toda la pantalla cuando la entrada es demasiado larga?

Answer 1

Bueno, hay max-width max-height y overflow en CSS.

Asi que

td.whatever
{
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

restringiría el ancho y la altura máximos a 150px, y puede ser desde menos de 150 hasta 150, y cualquier cosa que no encaje dentro será recortada y oculta a la vista.

El valor predeterminado de overflow: visible; ( overflow: visible; ) es simplemente permitir que cualquier cosa que no quepa dentro de su contenedor específico se derrame fuera de él. Si solo desea limitarlo horizontalmente y no desea ocultar nada, word-wrap puede ayudar:

td.whatever
{
    max-width: 150px;
    word-wrap: break-word;
}

word-wrap palabras romperá las palabras siempre que sea necesario, incluso si no está al final de una palabra. También puede usar la height y el width para especificar un tamaño fijo si no desea que la tabla se expanda o se encoja.

Answer 2

Debe especificar AMBOS el max-width y display estilos de display (porque el atributo de visualización está configurado como divertido porque es un td, no un elemento normal), por ejemplo

td{
    max-width: 100px;
    display: inline-block;
}

Answer 3

Podrías usar word-wrap:break-word; , así que las palabras demasiado largas se envuelven.

Answer 4

También hay una buena solución con la propiedad max-width: 0px; Así será responsable a todo el ancho de la tabla.

Answer 5

td.whatever_class{
    max-width: 100px;
}

Reemplace 100px por el ancho que desee. 1000px es un buen ancho para los sitios web, ya que cabrá en casi todos los monitores que tiene la gente hoy en día, por lo que si tiene 20 columnas, por ejemplo, hágalo 50px.