我想使用 DIV 创建表格网格(仅限 HTML 和 CSS)。我几乎进入但仍然遇到一些问题。我附上了样本图像。我希望网格应该与此示例图像相同。我附上了 fiddle到目前为止我创建的内容。你能帮助别人知道我在做什么吗?我该如何改进才能像图片一样完成表格?
HTML:
<div class="containerDiv">
<div class="rowDivHeader">
<div class="cellDivHeader">Recommendation</div>
<div class="cellDivHeader">Typical savings</div>
<div class="cellDivHeader">Improved SAP</div>
<div class="cellDivHeader">Improved EI</div>
<div class="cellDivHeader">Indicative cost</div>
<div class="cellDivHeader">Include</div>
<div class="cellDivHeader lastCell">Removal Reason</div>
</div>
<div class="rowDiv">
<div class="cellDiv">Room-in-roof-insulation</div>
<div class="cellDiv">93.0</div>
<div class="cellDiv">F : 29</div>
<div class="cellDiv">B : 89</div>
<div class="cellDiv">£1,500 - £2,700</div>
<div class="cellDiv">Checkbox</div>
<div class="cellDiv lastCell">Textbox</div>
</div>
</div>
CSS:
.containerDiv {
border: 1px solid #3697f6;
width: 100%;
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold;
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
}
.cellDivHeader {
border-right: 1px solid white;
display: table-cell;
width:12%;
padding: 1px;
text-align: center;
}
.cellDiv {
border-right: 2px solid white;
display: table-cell;
width:10%;
padding-right: 4px;
text-align: center;
border-bottom: none;
}
.lastCell {
border-right: none;
}
示例图片
最佳答案
将 display:table-row
添加到行 div 即 .rowDivHeader & .rowDiv
& display:table
到主 div .containerDiv
.containerDiv {
border: 1px solid #3697f6;
width: 100%; display:table
}
.rowDivHeader {
border: 1px solid #668db6;
background-color: #336799;
color: white;
font-weight: bold; display:table-row
}
.rowDiv {
border: 1px solid #668db6;
background-color: #cee6fe;
display:table-row
}
关于html - 在 HTML 和 CSS 中使用 Div 的表格网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14255619/