☰

HTML テーブルが CSS 列幅を尊重しないのはなぜですか? 質問する

tag-icon • tag-icon html css html-table
HTML テーブルが CSS 列幅を尊重しないのはなぜですか? 質問する

HTML テーブルがあり、最初の数列をかなり長くしたいと思っています。これを CSS で実行しています。

td.longColumn
{ 
     width: 300px;
}

これが私の表の簡略版です

<table>
  <tr>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   [ . . and a bunch more columns . . .]
  </tr>
</table>

何らかの理由で、列が多数ある場合、テーブルではこの列が 300 ピクセル未満になるようです。基本的には、何があってもその幅を維持するようにしたいです (水平スクロール バーを増やすだけです)。

テーブルが入っているコンテナーには最大幅の指定がないので、この幅を尊重せずに列を縮小してしまう理由がわかりません。

この問題を回避する方法はありますか? どのような場合でも、この列は一定の幅を維持します。
外側のコンテナー div の CSS は次のとおりです。

#main
{
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}

ベストアンサー1

テーブルにルールを適用すると、テーブル セルの幅の設定がうまくいく可能性がありますtable-layout: fixed。これは、テーブルを使用するときにセルのサイズ設定に関する多くの問題を解決するのに役立ちました。多次元データを表示するというテーブルの目的に合っている場合は、DIV のみを使用してコンテンツを配置するように切り替えることはお勧めしません。

おすすめ記事