css - 如何确保表格在任何屏幕尺寸上都是正方形的。无论有多少行/列

Question

我正在尝试将两行十六列的表格样式设置为在任何屏幕分辨率下始终为正方形。所以单元格是纵向布局中的窄矩形。我尝试了以下方法:

HTML:

<table>
    <tr>
        <td><div class="content"></div></td>
        ... *another 14 td's*   
        <td><div class="content"></div></td>
    </tr>
    <tr>
        <td><div class="content"></div></td>
        ... *another 14 td's*       
        <td><div class="content"></div></td>
    </tr>
</table>

CSS:

table {
   width:100%;
}
table:after {
   content: '';
   display: block;
   margin-top: 100%;
}
td {
   width: 6.25%;
   position: relative;
}
td .content {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: yellow;
   border: 1px solid brown;
}

Answer 1

我自己找到了解决方案，但还是没看懂。所以我的问题从“如何”变成了“为什么”。我还忘了提及，我在此页面上使用的是 Bootstrap 4。所以整个解决方案如下 - 它有效，我测试过。但是如果我添加另一个 <div>之前<div class = “square”> , 它不会起作用。它仅在 <div class = “col-*-*> 时有效(Bootstrap 类)在 <div class = “square”> 之前.

HTML:

<div class = "row">
    <div class = "col-sm-8">
        <div class = "square">
            <table>
                <tr>
                    <td><div class="content"></div></td>
                    ... *another 14 td's*

                    <td><div class="content"></div></td>
                </tr>
                <tr>
                    <td><div class="content"></div></td>
                    ... *another 14 td's*

                    <td><div class="content"></div></td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS:

.square {
   width:100%;
   height: 100%
}
.square:after {
   content: '';
   display: block;
   margin-top: 100%;
}
table {
   width:100%;
   height: 100%;
}
td {
   width: 6.25%;
   position: relative;
}
td .content {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: yellow;
   border: 1px solid brown;
}