web-dev-qa-db-ja.com

CSS display：幅が100％に設定されている場合、table-rowは展開されません

少し問題があります。 FireFox 3.6を使用しており、次のDOM構造があります。

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

そして、次のCSS：

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

display:table-rowを取り外すと、view-rowが100％の幅で正しく表示されます。戻すと縮小します。私はこれをJS Binに載せました：

http://jsbin.com/ifiyo

どうしたの？

csscss3
91
chum of chance

display:table-rowなどを使用している場合は、適切なマークアップが必要です。これには、格納テーブルが含まれます。それなしでは、元の質問は基本的に次の同等の悪いマークアップを提供します。

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

上記の表はどこにありますか？どこからでも行を作成することはできません（trはtable、thead、tbodyなどに含まれている必要があります）

代わりに、display:tableを使用して外側の要素を追加し、含まれる要素に100％の幅を付けます。 2つの内側のセルは自動的に50/50になり、テキストを2番目のセルの右に揃えます。テーブル要素を持つfloatsを忘れてください。多くの頭痛の種になります。

マークアップ：

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS：

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}
84
KP.

テスト済みの回答：

.view-row cssで、次を変更します。

display:table-row;

に：

display:table

および「float」を取り除く。すべてが期待どおりに機能します。

コメントで提案されているように、ラッピングテーブルは必要ありません。 CSSでは、暗黙的なツリー構造のレベル（この場合は行）を省略することができます。コードが機能しない理由は、「幅」はテーブル行レベルではなくテーブルレベルでしか解釈できないためです。 「テーブル」があり、そのすぐ下に「テーブルセル」がある場合、それらは暗黙的に連続して座っていると解釈されます。

作業例：

<div class="view">
    <div>Type</div>
    <div>Name</div>                
</div>

cSSを使用：

.view {
  width:100%;
  display:table;
}

.view > div {
  width:50%;
  display: table-cell;
}
54
Amin Ariana

CSS3仕様によると、レイアウトをテーブルスタイル要素でラップする必要はありません。ブラウザーは、含まれている要素が存在しない場合、その要素の存在を推測します。

16
John Carney

.view-typeクラスfloat:left;を与えるか、float:right;の.view-nameを削除します

編集： div <div class="view-row">を別のdivでラップします（例：<div class="table">）

そして、次のcssを設定します。

.table {
    display:table;
    width:100%;}

正しい結果を得るには、テーブル構造を使用する必要があります。

1
Sotiris

テーブル内にテーブルセルを直接ネストできます。あなたには、テーブルがあります。最初のテーブル行を開始しても機能しません。このHTMLで試してください：

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

  </body>
</html>
0
rakensi