Tabelle traboccanti di CSS in Firefox
-
22-07-2019 - |
Domanda
Ho problemi a far comportare il mio tavolo. Il contenuto continua a traboccare e i miei tentativi di limitarlo non producono l'effetto desiderato.
Questo è il mio markup:
<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>
Ho quindi un po 'di stile. I td's
stanno traboccando, ma non ho avuto fortuna a impostare il loro overflow su hidden / auto
. Ho avuto più fortuna a impostare l'overflow nella classe hastable
che contiene la tabella. Ma ho ancora problemi a far Firefox per rispettare la larghezza
distribuzione per le 3 colonne: 30%, 35%, 35%
. Ho anche provato a impostare min-width
, ma non ho ancora avuto fortuna. Ho diverse di queste tabelle sulla pagina e ognuna ha la sua larghezza. Qualche aiuto con questo pasticcio da tavolo?
.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%; }
Soluzione
Le tabelle sono notoriamente difficili da modellare. Prova ad aggiungere questo al tuo CSS:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
Suggerirei anche di utilizzare gli effettivi elementi HTML COL
/ COLGROUP
per definire le tue colonne, in questo modo:
<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>
Tieni presente che, nonostante ciò, le celle con dati di overflow costringeranno a espandere la cella, la riga e la tabella contenenti per adattarle. CSS overflow: auto
/ nascosto
/ scroll
non influisce sulle celle.
Rif:
Altri suggerimenti
Avvolgi il tuo tavolo in un div e imposta l'overflow per il div.
<div style='overflow:scroll;'>
<table>
...
</table>
</div>