Tuesday, March 11, 2014

Is it possible to create the table like grid using only div's without tables?

Yes it possible to dothe table like structure with div's and css.

Table grid using Div in HTML and CSS

<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%; 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
}
.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;
}

No comments:

Post a Comment