在 HTML 和 CSS 中使用 Div 的表格网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14255619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table grid using Div in HTML and CSS
提问by Sri
I want to create a table grid using DIV (HTML & CSS only). I almost got into and still got some issues. I attached the sample image. I want the grid should be the same like this sample image. I attached the fiddleof what I created so far. Could you help somebody that what am doing and how can I improve to finish the table as same as the image?
我想使用 DIV（仅限 HTML 和 CSS）创建表格网格。我几乎进入并仍然遇到一些问题。我附上了示例图片。我希望网格应该与此示例图像相同。我附上了迄今为止我创作的小提琴。你能帮助别人知道我在做什么，我该如何改进以完成与图像相同的表格？
HTML:
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:
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;
}
sample image
示例图像
采纳答案by Sowmya
Add display:table-rowto the row div i.e .rowDivHeader & .rowDiv
添加display:table-row到行 div ie.rowDivHeader & .rowDiv
& display:tableto the main div .containerDiv
&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
}
