Friday, 13 November 2015

How would be the DIV elements can act as a TABLE element?

Do you believe your DIV elements can act as a TABLE element

Most of the people having doubt about how can a div element can act as a table element?. Finally the answer is revealed.

Create necessary DIV elements like the sample code below. 
Read these simple steps to understand easily.

  1. The DIV element with class 'custom-table' would render the table element's properties. 
  2. The DIV element with class 'row' would render the table-row properties.
  3. The DIV element with class 'column' would render the table-cell properties.


HTML

<div class="cutom-table">
    <div class="row">
        <div class="column">
            <span><strong>Title 1</strong></span>
        </div>
        <div class="column">
            <span><strong>Title 2</strong></span>
        </div>
        <div class="column">
            <span><strong>Title 3</strong></span>
        </div>
    </div>
    <div class="row">
        <div class="column">
            <span>Content</span>
        </div>
        <div class="column">
            <span>Content Content Content</span>
        </div>
        <div class="column">
            <span>Content</span>
        </div>
    </div>
</div> 


CSS

.cutom-table {
    display: table;
    width: 100%;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
.row {
    display: table-row;
    width: 100%;
}
.column {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
}




Find the working sample in this link jsfiddle

That it. You have done!


Note:
You know the TABLE is an absolete.


No comments:

Post a Comment