FirefoxでCSSでオーバーフローするテーブル

Question

テーブルの動作に問題があります。コンテンツが溢れ続け、コンテンツを制限しようとしても期待した効果が得られません。

これは私のマークアップです：

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

それからいくつかのスタイルがあります。 tdのはオーバーフローしていますが、 overflowをhidden / auto に設定する運はありませんでした。テーブルを含む hastable クラスでのオーバーフローの設定は幸運でした。しかし、 width を尊重するために Firefox を取得するのにまだ問題があります。 3つの列の分布： 30％、35％、35％。また、 min-width を設定しようとしましたが、まだ運がありません。ページにはこれらのテーブルがいくつかあり、それぞれが独自の幅を取ります。このテーブルの混乱について何か助けがありますか？

.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

テーブルのスタイル設定は難しいことで有名です。これをCSSに追加してみてください：

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

また、実際のHTML COL / COLGROUP 要素を使用して列を定義することもお勧めします。

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

これにもかかわらず、データがオーバーフローしているセルは 、収容するセル、行、およびテーブルを強制的に収まるように拡張することに注意してください。 CSS overflow：auto / hidden / scroll はセルに影響しません。

参照：

• CSS：テーブルレイアウト、
• HTML：COLGROUP

Answer 2

divでテーブルをラップし、divにオーバーフローを設定します。

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