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

我遇到了一个小问题，我使用的是 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

发生什么事了？

177848 次浏览
小开

give on .view-type class float:left; or delete the float:right; of .view-name

edit: Wrap your div <div class="view-row"> with another div for example <div class="table">

and set the following css :

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

You have to use the table structure for correct results.

小开
最佳答案

If you're using display:table-row etc., then you need proper markup, which includes a containing table. Without it your original question basically provides the equivalent bad markup of:

<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.)

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 floats with table elements. It'll cause so many headaches.

markup:

<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;
}
小开

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.

小开

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:

<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>
小开

Tested answer:

In the .view-row css, change:

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.

Working example:

<div class="view">
<div>Type</div>
<div>Name</div>
</div>

with css:

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


.view > div {
width:50%;
display: table-cell;
}

提交答案