Technology
Computer Programming
How to make html table all cell in equal height and equal width in all conditions like mobile view and desktop view ?
2 Answers
2
answers
How to make html table all cell in equal height and equal width in all conditions like mobile view and desktop view ?
3
Answer link
This can be done by giving some fixed widths to table data cells and using absolute position on content.
Here is the CSS:
table {
width: 90%;
}
td {
width: 33.33%;
position: relative;
}
td:after {
content: '';
display: block;
margin-top: 100%;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: gold;
}
Here is the HTML:
<table>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">2</div></td>
<td><div class="content">3</div></td>
</tr>
<tr>
<td><div class="content">4</div></td>
<td><div class="content">5</div></td>
<td><div class="content">6</div></td>
</tr>
<tr>
<td><div class="content">7</div></td>
<td><div class="content">8</div></td>
<td><div class="content">9</div></td>
</tr>
<table>