I want to create a table grid using DIV (HTML and CSS only). I almost went in and still had some problems. I have attached a sample image. I want the mesh to be the same as in this sample. I added a fiddle of what I have created so far. Could you help someone that you are doing and how can I improve to finish the table in the same way as the image?
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; }
sample image

Vinay source share