hacer - tablas en html5
Anchos de celda de tabla: ancho de fijación, ajuste/truncamiento de palabras largas (7)
Me doy cuenta de que necesitabas una solución para IE6 / 7 pero solo estoy lanzando esto para cualquier otra persona.
Si no puede usar table-layout: fixed y no le importa IE <9 esto funciona para todos los navegadores.
td {
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
max-width: 30px;
}
Tengo una tabla que contiene celdas con texto de varias longitudes. Es esencial que todas las celdas de la tabla tengan el mismo ancho. Si esto significa truncar palabras largas o forzar un quiebre en palabras largas, entonces está bien.
No puedo encontrar ninguna forma de hacer que esto funcione.
Esto es para una aplicación cliente interna, por lo que debe funcionar solo en IE6 e IE7.
Una página de ejemplo está debajo. La celda que contiene onereallylongword es la que ofende.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
Prueba esto:
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
Si desea que el texto largo se ajuste correctamente en las líneas nuevas, en su llamada a la identificación de la tabla, use un table-layout:fixed; propiedades CSS table-layout:fixed; de lo contrario, simplemente CSS no puede dividir el texto largo en líneas nuevas.
Siempre que arregle el ancho de la tabla y establezca la propiedad table-layout, esto es bastante simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; overflow: hidden; }
table { width : 90px; table-layout: fixed; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
He probado esto en IE6 y 7 y parece funcionar bien.
ha resuelto un problema similar con largas líneas de código al usar un DIV y tener overflow-x:auto . CSS no puede dividir las palabras por ti.
prueba td {background-color:white}
Simplemente funcionó para una columna que no quería que me pisoteara el texto largo de una columna anterior.
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }
</style>