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

不幸的是，还没有真正好的方法来设置相对于元素宽度的高度。您可以尝试的一种解决方案是使width和height静态数字，然后使用媒体查询，这样它就不会超出页面范围。像这样的东西：

.table {
  width: 100px;
  height: 100px;
}
@media (min-width: 768px) {
  .table {
    height: 300px;
    width: 300px;
  }
}
@media (min-width: 1200px) {
  .table {
    width: 500px;
    height: 500px;
  }
}

要回答第二个问题： Bootstrap使用flexbox，除非您另外指定，否则将尝试使所有内容适合同一行。如果您将flex-wrap: wrap;设置为该引导程序类，则它应允许100％的内容填充该行并向上或向下碰撞其他内容。

Answer 2

我自己找到了解决方案，但仍然不理解。所以我的问题从“如何”变为“为什么”。我也忘了提一下，我在此页面上使用Bootstrap 4。因此，整个解决方案都在下面–我测试过，它可以工作。但是，如果我在<div>之前添加另一个<div class = “square”>，它将无法正常工作。仅当<div class = “col-*-*>（引导程序的类）在<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;
}

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

2 个答案: