html - CSS 表结构问题

Question

我是 CSS 的新手，我实际上试图使用 Html Div 和 CSS 创建一种表格结构，但遇到了一个问题。

问题是我在 1 行中放置了 4 列。最后一列包含一个可扩展的文本区域。当我尝试扩展文本区域时，只有最后一列而不是整行扩展。

下面是代码演示:

http://codepen.io/anon/pen/oIChn

Answer 1

代码不起作用，因为您没有遵循表结构，表结构应该(始终)是:

table
-row
--cell
--/cell
-/row
/table

在您的代码中，您正在使用一些 display:tablexx CSS，但是通常在元素中与它们期望紧邻的表结构的其他方面隔离开来，因为这样布局就被破坏了。

正确的 CSS/HTML 结构是(例如):

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
    <div class='row'>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
</div>

CSS

.table {
    display:table;
    height:100%;
}
.cell {
    display:table-cell;
    width:50px;
    height:100px;
    border:1px solid black;
}
.row {
    display:table-row;
}

请注意，使用它时没有特定的 thead 或 tbody 部分，您可以根据需要简单地调整 CSS 以样式标题等。