Tabellen überfüllt mit CSS in Firefox

Question

Ich habe Probleme bekommen mein Tisch zu verhalten. Der Inhalt hält überquellenden und meine Versuche, sie zu beschränken nicht den gewünschten Effekt zu erzeugen.

Das ist mein 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>

Ich habe dann einigen Stil. Die td's sind überfüllt, aber ich habe kein Glück Einstellung ihrer overflow to hidden/auto. Ich habe mehr Glück Einstellung Überlauf in der hastable Klasse, die die Tabelle enthält. Aber ich bin immer noch Probleme bekommen Firefox die width Verteilung für die drei Spalten zu respektieren: 30%, 35%, 35% . Ich habe auch versucht min-width Einstellung, aber noch kein Glück. Ich habe mehrere dieser Tabellen auf der Seite, und jeder nimmt seine eigene Breite. Jede Hilfe dieser Tabelle Chaos?

.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

Die Tische sind notorisch schwierig zu Stil. Versuchen Sie, diese zu Ihrem CSS:

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

Ich würde auch tatsächlich HTML COL / COLGROUP Elementen vorschlagen Ihre Spalten zu definieren, wie es so:

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

Nehmen Sie zur Kenntnis, dass trotz dieses, Zellen mit überquellenden Daten wird zwingen, die enthaltenden Zelle, Zeile und Tabelle zu passen zu erweitern. CSS overflow: auto / hidden / scroll nicht Zellen beeinflussen.

Ref:

• CSS: Tabellenlayout ,
• HTML: COLGROUP

Answer 2

Wickeln Sie Ihre Tabelle in einem div und setzen Überlauf für die div.

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