html - セルの幅を 10% 維持する

Question

幅が 10% のセルにいくつかの単語が含まれています。ウィンドウのサイズを縮小すると、内部のテキストの長さと一致するまでサイズが小さくなり続け、その後縮小が停止します。幅を正確に 10% に維持したい。どうすればいいですか？

申し訳ありませんが、div を使用することはできません。

Answer 1

これはトリックを行うかもしれません：

#your_table {
  table-layout: fixed;
}

テーブルには (これを実装するのはブラウザー次第であるため)、2 種類のレイアウトを含めることができます。

1. table-layout: fixed: これは「ばかげた」テーブル レイアウトです。テーブルはその内容を気にせず、不注意にサイズを変更します。
2. table-layout: auto: これは「スマート」なテーブル レイアウトです。テーブルはその内容を考慮し、セルの最小幅と高さに達するとセルのサイズ変更を停止します。これはデフォルトのテーブル動作です。

ありがとう W3C: http://www.w3.org/TR/CSS2/tables.html#propdef-table-layout

Answer 2

あなたが本当に欲しいのは設定された幅のようです。テーブルが 300px でなければならないと言った場合、セルが常に 30px であることを指定できます。相対的なスケールが問題の原因です。

table.myClass{
    width: 300px;
}

table.myClass td.myOtherClass{
    width: 10%;
}