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.
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
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.
- The DIV element with class 'custom-table' would render the table element's properties.
- The DIV element with class 'row' would render the table-row properties.
- The DIV element with class 'column' would render the table-cell properties.
<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;
}
That it. You have done!
Note:
You know the TABLE is an absolete.
No comments:
Post a Comment