pantalla - tabla responsive html
¿Cómo ocultar el desbordamiento de fila de tabla? (7)
El único inconveniente (parece) es que los anchos de celda de la tabla son idénticos. ¿Alguna forma de evitar esto? - Josh Stodola 12 de octubre a las 15:53
Simplemente defina el ancho de la tabla y el ancho de cada celda de la tabla
algo como
table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}
Funciona a las mil maravillas: o)
Tengo algunas tablas html donde los datos de texto son demasiado grandes para caber. Entonces, expande la celda verticalmente para acomodarse a esto. Entonces las filas que tienen el desbordamiento son dos veces más altas que las filas con cantidades de datos más pequeñas. Esto es inaceptable. ¿Cómo puedo forzar que la tabla tenga la misma altura de fila de 1em ?
Aquí hay un marcado que reproduce el problema. La tabla solo debe ser la altura de una línea, con el texto desbordado oculto.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { width:250px; }
table tr { height:1em; overflow:hidden; }
</style>
</head>
<body>
<table border="1">
<tr>
<td>This is a test.</td>
<td>Do you see what I mean?</td>
<td>I hate this overflow.</td>
</tr>
</table>
</body>
</html>
Aquí hay algo que intenté. Básicamente, puse el contenido "flexible" (el td que contiene líneas que son demasiado largas) en un contenedor div de una línea de alto, con desbordamiento oculto. Luego dejo que el texto se envuelva en lo invisible. Sin embargo, tienes descansos en los recortes de palabras, no solo un corte suave.
table {
width: 100%;
}
.hideend {
white-space: normal;
overflow: hidden;
max-height: 1.2em;
min-width: 50px;
}
.showall {
white-space:nowrap;
}
<table>
<tr>
<td><div class="showall">Show all</div></td>
<td>
<div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
</td>
<td>
<div class="showall">Show all this too</div>
</td>
</tr>
</table>
En general, si está usando white-space: nowrap; es probable que se deba a que sepa qué columnas contendrán contenido que envuelva (o alargue la celda). Para esas columnas, generalmente envuelvo el contenido de la celda en un span con un atributo de class específico y aplica un width específico.
Ejemplo:
HTML :
<td><span class="description">My really long description</span></td>
CSS :
span.description {
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 150px;
}
En la mayoría de los navegadores modernos, ahora puede especificar:
<table>
<colgroup>
<col width="100px" />
<col width="200px" />
<col width="145px" />
</colgroup>
<thead>
<tr>
<th>My 100px header</th>
<th>My 200px header</th>
<th>My 145px header</th>
</tr>
</thead>
<tbody>
<td>100px is all you get - anything more hides due to overflow.</td>
<td>200px is all you get - anything more hides due to overflow.</td>
<td>100px is all you get - anything more hides due to overflow.</td>
</tbody>
</table>
Luego, si aplica los estilos de las publicaciones anteriores, de la siguiente manera:
table {
table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
overflow: hidden;
white-space: nowrap;
}
El resultado te da un desbordamiento muy bien escondido en toda la mesa. Funciona en los últimos Chrome, Safari, Firefox e IE. No he probado en IE antes del 9, pero supongo que funcionará hasta 7, e incluso podrías tener la suerte de ver 5.5 o 6 puntos de apoyo. ;)
Necesita especificar dos atributos, table-layout:fixed on table y white-space:nowrap; en las celdas También necesita mover el overflow:hidden; a las células también
table { width:250px;table-layout:fixed; }
table tr { height:1em; }
td { overflow:hidden;white-space:nowrap; }
Aquí hay una demostración . Probado en Firefox 3.5.3 e IE 7
Si se acepta Javascript como respuesta, hice un complemento de jQuery para abordar este problema (para obtener más información acerca del problema, consulte CSS: truncar las celdas de la tabla, pero ajustar tanto como sea posible ).
Para usar el plugin solo escribe
$(''selector'').tableoverflow();
Complemento: https://github.com/marcogrcr/jquery-tableoverflow
Ejemplo completo: http://jsfiddle.net/Cw7TD/3/embedded/result/
