una - Forzar tablas HTML para que no excedan el tamaño de sus contenedores

que significa cols en html

Question

Esta pregunta se ha formulado varias veces, pero ninguna de las respuestas proporcionadas parece ayudarme:

Vea esto en acción aquí: http://jsfiddle.net/BlaM/bsQNj/2/

Tengo un diseño "dinámico" (basado en porcentaje) con dos columnas.

.grid {
width: 100%;
box-sizing: border-box;
}
.grid > * {
box-sizing: border-box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}

En cada una de estas columnas, tengo una tabla que se supone que usa el ancho completo de la columna.

.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

Mi problema es que algunas de las columnas de esa tabla tienen contenido que debe truncarse para ajustarse al ancho dado de la tabla. Eso no sucede, sin embargo. Tengo dos mesas que se superponen entre sí.

Requisitos:

• Necesita ser basado en porcentaje. No puedo establecer tamaños absolutos.
• La altura de cada fila no debe crecer más allá de una línea de texto (lo que sucedería si elimino white-space: nowrap)
• Debe funcionar en Chrome, Firefox e Internet Explorer 8+
• No se pueden mostrar las tablas una debajo de la otra ya que tiene que caber en una hoja de papel al imprimir.

Lo que probé:

• dentro de y usa ancho y desbordamiento en eso. No cambió nada.
• "display: table" en conteniendo div - en lugar de tener dos columnas, las tablas se mostraban una debajo de la otra
• "table-layout: fixed;" - Obliga a todas las columnas a tener el mismo ancho
• Sé que las columnas 2 + 3 tienen un total de 30% de ancho, así que traté de configurar manualmente la columna 1 al 70% - No cambié nada
• Espacios de ancho cero en el contenido: no cambiaron nada, probablemente debido al espacio en blanco: nowrap;

Preguntas relacionadas:

• El ancho de la tabla excede el ancho del contenedor
• ¿Cómo evito que mi tabla HTML se estire?
• HTML CSS Cómo evitar que una celda de la tabla se expanda
• Tabla desbordante fuera de Div

Answer 1

En tu CSS:

table {
table-layout: auto;
width: 100%;
}

Eso debería cubrir todas las tablas

Answer 2

Las medidas en las tablas funcionan de manera diferente. En general, el ancho de una celda de tabla se maneja como ancho mínimo.

Una solución, si no le importa agregar marcado adicional, es poner un div dentro de cada celda de tabla en la que coloca el contenido. Luego, dale a este div un ancho o un ancho máximo. Asi que

<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>

se convierte

<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>

y así.

Ver el violín actualizado: http://jsfiddle.net/bsQNj/4/

Editar: Veo que el violín necesita algo de trabajo; olvidé poner algunos div en donde fueron necesarios. Pero espero que puedas trabajar con esta idea.

Answer 3

Tal vez te interese un max-width: 0; hack que he descubierto.

Tiene algunos límites, deberíamos usar tablas CSS en lugar de HTML, pero funciona:

.leftBlock
{
width: 100%;
max-width: 0;
word-wrap: break-word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}

http://jsfiddle.net/CyberAP/NUHTk/103/

Answer 4

necesita agregar la propiedad de diseño de tabla:

table-layout: fixed;

también incluya ancho = 100% en la etiqueta HTML de la tabla, no solo la etiqueta de estilo.

http://jsfiddle.net/reeK5/

Answer 5

.div {
width:300px;
border:1px solid;
}
.breaked {
word-break: break-all;
}
table{
border:1px solid red;
}
td {
border:1px solid green;
}

<div class="div">
<table>
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
<br /><hr/><br />
<table class="breaked">
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
</div>