如何确保表格的每个单元格都成为正方形,而不使用固定的大小?当他们改变宽度时,要有响应。
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>
3条答案
按热度按时间zrfyljdw1#
新答案:
要使表格单元格为方形,可以在
td
元素内的div
上使用aspect-ratio属性。就像这样:上一条回答:
您可以使用中介绍的技术:Grid of responsive squares。
根据您使用表格和方形表格单元格的情况进行调整,它看起来像这样:
FIDDLE demo
ttisahbt2#
下面是我的代码:http://jsfiddle.net/vRLBY/1/
关键是用途:
因为
padding-bottom
是根据宽度定义的。更多信息:http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares**注意:**之前我发布了一个不工作的代码(参见here)。感谢@web-tiki报告此bug ;- )
deyfvvtc3#
如果有人正在寻找一个不需要固定
width
属性(即使是百分比)的解决方案,下面是我根据上面的答案和批准答案中的link得出的答案:虽然有点蹩脚,但却一石二鸟: