[英]Table grid using Div in HTML and CSS
I want to create a table grid using DIV (HTML & CSS only). 我想使用DIV(仅限HTML和CSS)创建表格。 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 fiddle of 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 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>
.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;
}
Add display:table-row
to the row div ie .rowDivHeader & .rowDiv
将
display:table-row
添加到行div,即.rowDivHeader & .rowDiv
& display:table
to the main div .containerDiv
&
display:table
to the main 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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.