我是 CSS 的新手,我实际上试图使用 Html Div 和 CSS 创建一种表格结构,但遇到了一个问题。
问题是我在 1 行中放置了 4 列。最后一列包含一个可扩展的文本区域。 当我尝试扩展文本区域时,只有最后一列而不是整行扩展。
下面是代码演示:
最佳答案
代码不起作用,因为您没有遵循表结构,表结构应该(始终)是:
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 以样式标题等。
关于html - CSS 表结构问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23495547/