Pure div table using css

Div table layout using css

Using the Div Tag to Create Tables

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 Pure div table using css Reviewed by Bhaumik Patel on 6:32 AM Rating: 5