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

95

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

— 偶然的机会
source

90

如果使用的是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;
}

— KP。
source

11

+5摆脱该死的花车！

— 机会

37

-1因为解释是错误的。根据CSS2.1规范，该标记/ CSS应该可以正常工作。

— user123444555621 '02

8

没有浏览器对缺少的表有任何问题（Firefox 3.0 有 ...）实际的问题是表行的宽度设置被完全忽略了。（这意味着有问题的标记/ CSS实际上不能按预期方式工作，因此我在上面的评论是错误的；））

— user123444555621

3

这个答案是不正确的。询问者的标记是正确的。正如Pumbaa80所说，问题在于假设宽度必须在行级别而不是表级别。宽度仅在表级别解释。行可以完全省略。请参阅下面的完整答案。

— 阿敏·阿里亚纳

1

我没有评论有效的答案。我在评论您的评论，即您必须在CSS中包含表格行。你不知道因为您的个人信念而说某事是伪有效的，这是非常教条/僵硬的说法。特别是当CSS完全有效时。

— Bill Rosmus 2012年

56

测试答案：

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

— 阿敏·阿里亚纳（Amin Ariana）
source

您的答案表明<table><td></td></table>，按照W3C本身，等效的CSS 标记将是无效的HTML标记。虽然可以验证，但为什么建议您建议浏览器模仿此标记？

— KP。

16

根据CSS规则，这是正确的：w3.org/TR/CSS2/tables.html#anonymous-boxes。通过删除不必要的代码行（例如，KP建议的不必要的<view-row> div），更易于维护。这帮助了我...我正在使用它。+1

— Bill Rosmus 2012年

1

摆脱float语句是否足够？.view div可以保持其显示状态：table-row属性。

— Ideogram 2014年

1

很好，~~但是就我所知，它在IE9上不起作用。~~我错了。这很棒！:)

— f1lt3r

当然显示：当您有多于1行时，表是没有用的。它们都导致严重的未

— 对准

16

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

— 约翰·卡尼
source

4

CSS 2.1的 17.2.1节，顶部3.2中指定了相同的内容。下面的HBOX / VBOX示例正是这种情况。所以看起来浏览器只是不在乎。

— user123444555621 '02

1

给出.view-type类float:left;或删除float:right;的.view-name

编辑：<div class="view-row">例如，用另一个div 包裹div<div class="table">

并设置以下css：

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

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

— 索蒂里斯
source

我测试了ff3.6，即8，chrome，opera。您可以在这里看到jsbin.com/ifiyo/4他们并排显示它们

— Sotiris 2010年

我一直想在最右边输入名称，在最左边输入文字...如果您在两者上都执行display：inline并取出display：table-row，那么我想可能会有更好的方法使用table-row / cell属性进行操作。

— 碰巧

0

您可以将table-cell直接嵌套在表中。你要桌子。不能启动表行。尝试使用以下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>

— 拉肯西
source