Html CSS表结构问题

我是CSS中的一个noob，实际上我试图使用HTMLdiv和CSS创建一种类似于表的结构，但遇到了一个问题

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

下面是代码演示：

---

代码不起作用，因为您没有遵循表结构，表结构应该（始终）是：

在您的代码中，您使用了一些

display:tablexx

CSS，但通常是在与表结构的其他方面隔离的元素中，他们希望它们位于旁边，因此布局被破坏

正确的CSS/HTML结构是（例如）：

HTML

---

请注意，使用此选项没有特定的

thead

或

tbody

部分，您只需根据需要将CSS调整为样式标题等。

将此选项添加到CSS末尾即可

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

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

---

如果这是表格数据，为什么不使用实际的表格呢？否则，您将需要查看如何为容器div使用display:table-*属性。

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

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

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

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