CSS 显示：当宽度设置为 100% 时，表格行不会扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3480060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS display:table-row does not expand when width is set to 100%
提问by chum of chance
I'm having a bit of a problem. I'm using FireFox 3.6 and have the following DOM structure:
我有点问题。我正在使用 FireFox 3.6 并具有以下 DOM 结构：
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
And the following CSS:
以及以下 CSS：
.view-row {
width:100%;
display:table-row;
}
.view-name {
display: table-cell;
float:right;
}
.view-type {
display: table-cell;
}
If I take off the display:table-rowit will appear correctly, with the view-rowshowing a width of 100%. If I put it back it shrinks down. I've put this up on JS Bin:
如果我取下display:table-row它，它将正确显示，view-row显示宽度为 100%。如果我把它放回去，它会缩小。我把这个放在 JS Bin 上：
What's going on?
这是怎么回事？
采纳答案by KP.
If you're using display:table-rowetc., then you need proper markup, which includes a containing table. Without it your original question basically provides the equivalent bad markup of:
如果您正在使用display:table-row等，那么您需要适当的标记，其中包括一个包含表。没有它，您的原始问题基本上提供了以下等效的错误标记：
<tr style="width:100%">
<td>Type</td>
<td style="float:right">Name</td>
</tr>
Where's the table in the above? You can't just have a row out of nowhere (tr must be contained in either table, thead, tbody, etc.)
上面的表在哪里？你不能只是有一排冒出（TR必须包含在任一table，thead，tbody，等）
Instead, add an outer element with display:table, put the 100% width on the containing element. The two inside cells will automatically go 50/50 and align the text right on the second cell. Forget floatswith table elements. It'll cause so many headaches.
相反，添加一个带有 的外部元素display:table，将 100% 宽度放在包含元素上。两个内部单元格将自动变为 50/50 并在第二个单元格上对齐文本。忘记floats表格元素。它会引起很多头痛。
markup:
标记：
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
</div>
CSS:
CSS：
.view-table
{
display:table;
width:100%;
}
.view-row,
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
}
回答by Amin Ariana
Tested answer:
测试答案：
In the .view-row css, change:
在 .view-row css 中，更改：
display:table-row;
to:
到：
display:table
and get rid of "float". Everything will work as expected.
并摆脱“浮动”。一切都会按预期进行。
As it has been suggested in the comments, there is no need for a wrapping table. CSS allows for omitting levels of the tree structure (in this case rows) that are implicit. The reason your code doesn't work is that "width" can only be interpreted at the table level, not at the table-row level. When you have a "table" and then "table-cell"s directly underneath, they're implicitly interpreted as sitting in a row.
正如评论中所建议的那样，不需要包装表。CSS 允许省略隐含的树结构级别（在本例中为行）。您的代码不起作用的原因是“宽度”只能在表级别解释，而不能在表行级别解释。当您有一个“表格”，然后在其正下方有“表格单元格”时，它们会被隐含地解释为排成一排。
Working example:
工作示例：
<div class="view">
<div>Type</div>
<div>Name</div>
</div>
with css:
使用 CSS：
.view {
width:100%;
display:table;
}
.view > div {
width:50%;
display: table-cell;
}
回答by John Carney
Note that according to the CSS3 spec, you do NOT have to wrap your layout in a table-style element. The browser will infer the existence of containing elements if they do not exist.
请注意，根据 CSS3 规范，您不必将布局包装在表格样式元素中。如果包含元素不存在，浏览器将推断它们是否存在。
回答by Sotiris
give on .view-typeclass float:left;or delete the float:right;of .view-name
给出.view-type类float:left;或删除float:right;的.view-name
edit:Wrap your div <div class="view-row">with another div for example <div class="table">
编辑：<div class="view-row">例如用另一个 div包裹你的 div<div class="table">
and set the following css :
并设置以下 css ：
.table {
display:table;
width:100%;}
You have to use the table structure for correct results.
您必须使用表结构才能获得正确的结果。
回答by rakensi
You can nest table-cell directly within table. You muslt have a table. Starting eith table-row does not work. Try it with this HTML:
您可以直接在表格中嵌套表格单元格。你必须有一张桌子。启动 eith table-row 不起作用。用这个 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>
