Tables débordant de CSS dans Firefox

Question

J'ai du mal à faire en sorte que ma table se comporte. Le contenu ne cesse de déborder et mes tentatives pour le limiter ne produisent pas l'effet souhaité.

Ceci est mon balisage:

<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>

J'ai alors un peu de style. Les td's débordent, mais je n'ai pas eu la chance de définir leur débordement sur hidden / auto . J'ai eu un meilleur dépassement de chance dans la classe hastable qui contient la table. Cependant, je ne parviens toujours pas à Firefox respecter la largeur . répartition pour les 3 colonnes: 30%, 35%, 35% . J'ai aussi essayé de définir min-width , mais toujours pas de chance. J'ai plusieurs de ces tableaux sur la page, et chacun prend sa propre largeur. Toute aide avec ce gâchis de table?

.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%; }

Answer 1

Les tables sont notoirement difficiles à styliser. Essayez d’ajouter ceci à votre CSS:

table { table-layout: fixed; width: 100% /* or whatever fixed width */; }

Je suggérerais également d'utiliser les éléments HTML COL / COLGROUP HTML réels pour définir vos colonnes, comme suit:

<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>

Prenez note que, malgré cela, les cellules avec des données en débordement forceront à forcer la cellule, la ligne et le tableau qui le contiennent à se développer pour s’adapter. Débordement de CSS : auto / masqué / défilement n'affectent pas les cellules.

Réf.:

• CSS: présentation de la table ,
• HTML: COLGROUP

Answer 2

Enveloppez votre table dans un div et définissez un débordement pour le div.

<div style='overflow:scroll;'>
    <table>
      ...
    </table>
</div>