Question

我遇到了一些问题。我正在使用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

发生了什么事？

Answer 1

如果您正在使用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并在第二个单元格上对齐文本。忘记带有表格元素的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;
}

Answer 2

经过测试的答案：

在.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;
}

Answer 3

请注意，根据CSS3规范，您不必将布局包装在表格式元素中。如果不存在，浏览器将推断包含元素的存在。

Answer 4

授予.view-type班float:left;或删除float:right; .view-name

修改：将您的div <div class="view-row">换成另一个div，例如<div class="table">

并设置以下css：

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

您必须使用表格结构才能获得正确的结果。

Answer 5

您可以直接在表格中嵌套表格单元格。你有一张桌子。启动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>

CSS显示：当宽度设置为100％时，表格行不会展开

5 个答案: