CSS显示：当宽度设置为100％时，表格行不展开
我有一个问题。 我使用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％宽度放在包含元素上。 里面的两个单元格将自动走50/50，并在第二个单元格右alignment文本。 忘记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; }
经testing答案：
在.view行的CSS中，更改：
display:table-row;
至：
display:table
摆脱“浮” 。 一切都会按预期工作。
正如评论中所build议的那样，不需要包装表。 CSS允许省略隐含的树结构级别（在这种情况下是行）。 你的代码不起作用的原因是“宽度”只能在表级别解释，而不能在表行级别解释。 当你有一个“表格”，然后是“表格单元格”时，它们被隐含地解释为坐在一排。
工作示例：
<div class="view"> <div>Type</div> <div>Name</div> </div>
用CSS：
.view { width:100%; display:table; } .view > div { width:50%; display: table-cell; }
请注意，根据CSS3规范，您不必将您的布局封装在表格样式的元素中。 如果浏览器不存在，浏览器将推断包含元素的存在。
放在.view-type类float:left; 或者删除float:right; .view-name
编辑：用另一个div来包装你的div <div class="view-row">例如<div class="table">
并设置下面的CSS：
.table { display:table; width:100%;}
您必须使用表结构来获得正确的结果。
您可以直接在表格中嵌套表格单元格。 你有一张桌子。 开始eith表行不起作用。 试试这个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>
