少し問題があります。私は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に載せました：
どうしたの？
回答:
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;
}
テストされた答え：
.view-row cssで、次のように変更します。
display:table-row;に：
display:tableそして「フロート」を取り除きます。すべてが期待どおりに機能します。
コメントで提案されているように、ラッピングテーブルは必要ありません。CSSでは、暗黙的なツリー構造のレベル（この場合は行）を省略できます。コードが機能しないのは、「幅」がテーブル行レベルではなくテーブルレベルでしか解釈できないためです。「テーブル」があり、そのすぐ下に「テーブルセル」がある場合、それらは暗黙的に並んでいると解釈されます。
作業例：
<div class="view">
<div>Type</div>
<div>Name</div>
</div>
CSS付き：
.view {
width:100%;
display:table;
}
.view > div {
width:50%;
display: table-cell;
}
<table><td></td></table>それ自体ではW3Cによる無効なHTMLマークアップになるCSSの同等物を示唆しています。それは検証されますが、なぜこのマークアップを模倣するようにブラウザに指示することを提案するのですか？
.view-typeクラスを譲るfloat:left;かfloat:right;、.view-name
編集：<div class="view-row">たとえば、div を別のdivでラップします<div class="table">
次のCSSを設定します：
.table {
display:table;
width:100%;}
正しい結果を得るには、テーブル構造を使用する必要があります。
テーブル内に直接テーブルセルをネストできます。テーブルがあります。テーブル行のいずれかを開始しても機能しません。次の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>