Pure div table using css
Div table layout using css
Using the Div Tag to Create Tables |
<div class="divTable"> <div class="divTableRow"> <div class="divTableCellhd">Table Head</div> <div class="divTableCellhd">Table Head</div> <div class="divTableCellhd">Table Head</div> <div class="divTableCellhd">Table Head</div> </div> <div class="divTableRow"> <div class="divTableCell">pure</div> <div class="divTableCell">div</div> <div class="divTableCell">table</div> <div class="divTableCell">using css</div> </div> <div class="divTableRow"> <div class="divTableCell">div</div> <div class="divTableCell">table</div> <div class="divTableCell">layout</div> <div class="divTableCell"> <a href="http://lesson8.blogspot.com">http://lesson8.blogspot.com</a> </div> </div> <div class="divTableRow"> <div class="divTableCell">table</div> <div class="divTableCell">row</div> <div class="divTableCell">hover</div> <div class="divTableCell">effects css</div> </div> <div class="divTableRow"> <div class="divTableCell">alternate</div> <div class="divTableCell">row</div> <div class="divTableCell">color</div> <div class="divTableCell">css</div> </div> </div>
.divTable { width: 100%; display: table; -webkit-box-shadow: 1px 1px 1px 1px #888888; box-shadow: 1px 1px 1px 1px #888888; } .divTableRow { width: 100%; height: 100%; display: table-row; } .divTableCell { padding:5px; width: 25%; height: 100%; display: table-cell; border: 1px solid #808080; } .divTableCellhd { background-color: #4a6b82; color: #fff; padding:5px; width: 25%; height: 100%; display: table-cell; border: 1px solid #808080; } .divTable .divTableRow:nth-child(odd) { background-color: #aad4ff; } .divTable .divTableRow:hover { background-color: #FBEDBB; }
Pure div table using css
Reviewed by Bhaumik Patel
on
6:32 AM
Rating: