Tablas rebosantes de CSS en Firefox
-
22-07-2019 - |
Pregunta
Tengo problemas para que mi mesa se comporte. El contenido se desborda y mis intentos de restringirlo no producen el efecto deseado.
Este es mi marcado:
<div class="repeatingdiv">
<div class="hastitle">Some title</div>
<div class="hastable">
<table>
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
</div>
</div>
Entonces tengo algo de estilo. Los td's
se desbordan, pero no tuve suerte al configurar su desbordamiento en oculto / automático
. Tuve mejor suerte al configurar el desbordamiento en la clase hastable
que contiene la tabla. Pero todavía tengo problemas para conseguir que Firefox respete el ancho
distribución para las 3 columnas: 30%, 35%, 35%
. También intenté configurar min-width
, pero aún así no tuve suerte. Tengo varias de estas tablas en la página, y cada una tiene su propio ancho. ¿Alguna ayuda con este desorden en la mesa?
.repeatingdiv { }
.hastitle { margin:0 10px; padding:3px 3px 1px 6px; }
.hastable { overflow:hidden;
text-overflow: ellipsis;
margin:10px;
padding:10px;
}
table { }
table tbody { width: 100%; }
tr { width: 100%; }
td.col1 { width:30%; min-width:30%; }
td.col2 { width:35%; min-width:35%; }
td.col3 { width:35%; min-width:35%; }
Solución
Las tablas son notoriamente difíciles de diseñar. Intente agregar esto a su CSS:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
También sugiero usar elementos HTML reales de COL
/ COLGROUP
para definir sus columnas, así:
<table>
<colgroup class="col1" />
<colgroup class="col2" />
<colgroup class="col3" />
<thead><tr><th></th></tr></thead>
<tfoot><tr><th></th></tr></tfoot>
<tbody>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</tbody>
</table>
Tenga en cuenta que, a pesar de esto, las celdas con datos desbordados obligarán a la celda, fila y tabla que contiene a expandirse para ajustarse. CSS desbordamiento: auto
/ oculto
/ scroll
no afecta a las celdas.
Ref:
Otros consejos
Envuelva su tabla en un div y configure el desbordamiento para el div.
<div style='overflow:scroll;'>
<table>
...
</table>
</div>