Tabelas transbordando com CSS no Firefox
-
22-07-2019 - |
Pergunta
Estou tendo problemas para fazer minha mesa se comportar. O conteúdo mantém transbordando e minhas tentativas de restringir não estão produzindo o efeito desejado.
Esta é a minha marcação:
<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>
Em seguida, tenho algum estilo. O td's
estão transbordando, mas eu não tive nenhuma sorte definindo sua overflow to hidden/auto
. Eu tinha melhor estouro configuração sorte na classe hastable
que contém a tabela. Mas eu ainda estou tendo problemas para obter Firefox para respeitar a distribuição width
para as 3 colunas: 30%, 35%, 35%
. Eu também tentei definindo min-width
, mas ainda não sorte. Eu tenho várias dessas tabelas na página, e cada um tem a sua própria largura. Qualquer ajuda com essa bagunça 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%; }
Solução
Tabelas são notoriamente difíceis de estilo. Tente adicionar isso ao seu CSS:
table { table-layout: fixed; width: 100% /* or whatever fixed width */; }
Eu também sugerem o uso de elementos COL
HTML real / COLGROUP
para definir suas colunas, assim:
<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>
tome nota que, apesar disso, as células com dados transbordando irá forçar o contendo célula, linha e mesa para expandir para caber. CSS overflow: auto
/ hidden
/ scroll
não afetam as células.
Ref:
Outras dicas
Enrole sua mesa em um div e conjunto de estouro para o div.
<div style='overflow:scroll;'>
<table>
...
</table>
</div>