css3 - CSS显示:当width设置为100%时,table-row不会展开

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

这是怎么回事?

chum of chance asked 2019-09-11T01:57:27Z
5个解决方案
80 votes

如果您使用的是display:table等,那么您需要正确的标记,其中包含一个包含表格。 没有它你的原始问题基本上提供了相同的坏标记:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

上面的表格在哪里? 你不能只是冒出一行(tr必须包含在display:table,floatstbody等)

而是添加一个外部元素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. answered 2019-09-11T01:58:05Z
53 votes

测试答案:

在.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 answered 2019-09-11T01:59:00Z
16 votes

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

John Carney answered 2019-09-11T01:59:25Z
1 votes

请致电.view-type class float:left;或删除float:right; of <div class="view-row">

编辑:用另一个div包裹你的div <div class="view-row">,例如<div class="table">

并设置以下css:

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

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

Sotiris answered 2019-09-11T02:00:11Z
0 votes

您可以直接在表格中嵌套表格单元格。 你必须有一张桌子。 从表行开始不起作用。 尝试使用此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>
rakensi answered 2019-09-11T02:00:38Z
translate from https://stackoverflow.com:/questions/3480060/css-displaytable-row-does-not-expand-when-width-is-set-to-100