Grid table using Div in HTML and CSS

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

Sample Table Grid Image

+4
source share
1 answer

Add display:table-row to div line ie .rowDivHeader & .rowDiv

& display:table to 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 } 

Demo

+3
source

All Articles