时间戳

首页 > 解决方案 > 如何确保表格在任何屏幕尺寸上都是方形的。不管有多少行/列

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

问题描述

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

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;
}

标签： css

解决方案

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

.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% 的东西填充该行并上下颠簸其他东西。

推荐阅读