使表格单元格成为正方形 [英] Make table cells square
本文介绍了使表格单元格成为正方形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在不使用固定大小的情况下确保表格的每个单元格都变成正方形?并且在更改宽度时响应.
How to ensure that each cell of table should become square without using fixed sizes? And be responsive when they change width.
table {
width: 90%;
}
td {
width: 30%;
}
tr {
/** what should go here? **/
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<table>
推荐答案
您可以使用以下描述的技术:响应方块的网格.
You can use the technique described in: Grid of responsive squares.
使用表格和方形表格单元格适应您的用例,它看起来像这样:
Adapted to your usecase with a table and square table cells, it would look like this:
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;
}
<table>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<tr>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
<td><div class="content">1</div></td>
</tr>
<table>
这篇关于使表格单元格成为正方形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文