Question

我是CSS中的菜鸟，我实际上是在尝试使用Html Div和CSS创建一种表格结构，但却陷入了一个问题。

问题是我在一行中放了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调整为样式标题等。

Answer 2

在你的CSS末尾添加这个，应该做的诀窍

.r-tab-head{
display: table-row;
float: none;
}

.divCell {
    display: table-cell;
    float: none;
}

CSS表结构问题

2 个答案:

Demo Fiddle