我正在尝试使用 CSS 生成动态表格:
<html>
<head>
<style>
div.el1, div.el2 {
color:white;
width:70px;height:70px;
border:0px;
padding:0px;
font-size: 10px;
font-family: "Courier";
}
div.el1 {
background-color: green;
}
div.el2 {
background-color: orange;
}
div.tablediv {
display: table;
border:0px;
border-spacing:0px;
border-collapse:separate;
}
div.celldiv {
display: table-cell;
}
div.rowdiv {
display: table-row;
width:auto;
}
</style>
</head>
<body>
<div class="tablediv">
<div class="rowdiv">
<div class="celldiv">
<div class="el1" id="x1y1">ABC</div>
</div>
<div class="celldiv">
<div class="el2" id="x1y2"></div>
</div>
</div>
<div class="rowdiv">
<div class="celldiv">
<div class="el1" id="x2y1"></div>
</div>
<div class="celldiv">
<div class="el1" id="x2y2"></div>
</div>
</div>
</div>
</body>
</html>
body的内容是动态生成的,应该以表格的形式显示。不幸的是,如果每个单元格包含数据,它就会向下移动:
expected reality
--- --- --- ---
| | | | | |
--- --- |ABC|---
| | | | | |
--- --- --- ---
| | |
--- ---
我很感激任何帮助。
编辑:
添加垂直对齐:中间; div.celldiv 解决了问题,但我不明白原因。特别是因为内容仍然与单元格顶部对齐。
最佳答案
我可以帮忙...使用一张 table !
如果是表格数据,那么使用表格是完美的!
我知道这个答案有点蹩脚,但是你能解释一下为什么不使用表格吗?
关于html - 使用 CSS : unexpected cells shift 正确生成表格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2461158/