CSS显示：当宽度设置为100%时表格行不展开答案

【问题标题】：CSS display:table-row does not expand when width is set to 100%CSS显示：当宽度设置为100%时表格行不展开
【发布时间】：2010-08-13 19:18:02
【问题描述】：

我有点问题。我正在使用 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

发生了什么事？

【问题讨论】：

标签： css

【解决方案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;
}

【讨论】：

+5 摆脱该死的花车！
-1 因为解释是错误的。根据CSS2.1 specs，有问题的标记/CSS应该可以工作。
没有浏览器对丢失的表有任何问题（Firefox 3.0 had...）实际问题是width settings on table rows are entirely ignored。（这意味着有问题的标记/CSS实际上没有按预期工作，所以我上面的评论是错误的；））
这个答案不正确。提问者的标记是正确的。正如 Pumbaa80 所说，问题在于假设宽度必须在行级别而不是表级别。宽度仅在表级别解释。行可以完全省略。请参阅下面的完整答案。
我没有评论有效的答案。我在评论您的评论，您必须在 CSS 中包含一个表格行。你没有。由于您的个人信仰而说某事是伪有效的，这是一种非常教条/生硬的说法；尤其是当 CSS 完全有效时。

【解决方案2】：

测试答案：

在 .view-row css 中，更改：

display:table-row;

到：

display:table

和摆脱“浮动”。一切都会按预期进行。

正如 cmets 中所建议的，不需要包装桌。 CSS 允许省略隐含的树结构级别（在本例中为行）。您的代码不起作用的原因是“宽度”只能在表级别解释，而不是在表行级别。当你有一个“table”，然后是“table-cell”的正下方时，它们被隐式解释为排成一排。

工作示例：

<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> 的 CSS 等价物，根据 W3C，它本身就是无效的 HTML 标记。虽然它会验证，但您为什么建议让浏览器模仿这个标记？
这在 CSS 规则中是正确的：w3.org/TR/CSS2/tables.html#anonymous-boxes。通过删除不必要的代码行（例如，KP 建议的不必要的 div）更易于维护。这对我有帮助......我正在使用它。 +1
去掉浮动语句还不够吗？ .view div 可以保持它的 display: table-row 属性。
很好，~~但据我所知在IE9上不起作用。~~我错了。这很棒！ :)
当然显示：表格超过 1 行时没有用。它们都导致严重不对齐

【解决方案3】：

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

【讨论】：

specified in CSS 2.1，第 17.2.1 节，顶部 3.2 也是如此。下面的 HBOX/VBOX 示例正是所讨论的情况。所以看起来浏览器根本不在乎。

【解决方案4】：

放弃.view-type类float:left;或删除.view-name的float:right;

编辑：将您的 div <div class="view-row"> 用另一个 div 包装起来，例如 <div class="table">

并设置以下css：

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

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

【讨论】：

我用ff3.6测试过，即8,chrome,opera。你可以在这里看到它jsbin.com/ifiyo/4 他们并排显示它们
我希望在最右边有名字，在最左边输入......如果你在两者上都做了一个 display:inline 并取出 display:table-row 它可以工作，我是认为使用表格行/单元格属性可能有更好的方法。

【解决方案5】：

您可以直接在表格中嵌套表格单元格。你必须有一张桌子。启动任何一个表行都不起作用。试试这个 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>

【讨论】：