4

次の要件に準拠したテーブルを作成しようとしています。

  1. テーブル幅は0として定義する必要があります-ブラウザは列幅に従って幅を計算する必要があります（これは列サイズ変更プラグインに対応するためです）。
  2. 一部の列は固定幅（例：50px）を受け取る場合があります。
  3. 固定幅を受け取らない列は、コンテンツに自動調整する必要があります。

問題を説明するために小さな例を作成しました。列3が幅0のままであるため、表示されないことがわかります。

編集：「テーブルレイアウト：修正済み」が削除された場合。3番目の列が表示されますが、固定幅は無視され、すべての列が自動調整されます。

HTML

<table>
<tr>
    <td class="cell header" id="header1">Header 1</td>
    <td class="cell header" id="header2">Header 2</td>
    <td class="cell header" id="header3">Header 3</td>
</tr>
<tr>
    <td class="cell">Cell 1</td>
    <td class="cell">Cell 2</td>
    <td class="cell">Very looooong content</td>
</tr>
</table>

CSS

table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #696969;
}

.cell {
    color: #898989;
    border: 1px solid #888;
    padding: 2px;
    overflow: hidden;
}

.header {
    background-color: lightsteelblue;
    color: black;
}

#header1, #header2 {
    width: 50px;
}

これも可能ですか？どんな助けもいただければ幸いです...

</ p>

4

1 に答える 1

5

テーブルレイアウトでは不可能です。テーブルの幅が0で固定されています。

W3仕様セクション17.5.2.1を形成します。

固定テーブルレイアウトアルゴリズムでは、各列の幅は次のように決定されます。

  1. 'width'プロパティに'auto'以外の値を持つ列要素は、その列の幅を設定します。
  2. それ以外の場合、「width」プロパティに「auto」以外の値を持つ最初の行のセルが、その列の幅を決定します。セルが複数の列にまたがる場合、幅は列に分割されます。
  3. 残りの列は、残りの水平テーブルスペース（マイナスの境界線またはセル間隔）を均等に分割します。

ただし、自動レイアウト（セクション17.5.2.2で説明）を実行すると、コンテンツを操作するために幅がプッシュされ、可能な場合にのみ提供された幅が使用されます。たとえば、各列の最小幅の合計がテーブルのコンテナ幅を超える場合、設定した幅に関係なく、すべてが収まるようにシフトされます。

また、次の点にも注意してください。

'table-layout'が'auto'の場合、UAはテーブルレイアウトを決定するためにこのアルゴリズムを実装する必要はありません。動作が異なる場合でも、他のアルゴリズムを使用できます。

したがって、答えは残念ながら長蛇の列の「いいえ」であるように見えます:(

于 2013-10-11T15:25:44.510 に答える