Question

我现在很确定表不是为包装而设计的。

在使用小视口浏览时，我想用表实现一个特定的目的：https://i.imgur.com/gv3Yti5.png

我想要的是一个包装纸表，当在较大的显示器上观看时，包装纸是宽的，但是在较小的屏幕上观看时是包装纸，例如图像中的示例（请忽略编辑不当的地方。）

我现在所拥有的是一个没有包装的桌子，但水平滚动。是否有可行的替代方案来达到预期的效果？

.floor-plans table {
  width: 100%;
  margin-bottom: 40px;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

.floor-plans table tr:first-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.floor-plans table td,
table th {
  padding: 10px 15px;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
}

.floor-plans table td {
  font-size: 13px;
}

<div class="floor-plans mb-50 table-responsive">
  <table>
    <tbody>
      <tr>
        <td><strong>Rooms</strong></td>
        <td><strong>Bathrooms</strong></td>
        <td><strong>Size</strong></td>
        <td><strong>Price</strong></td>
        <td><strong>MLS&reg;#</strong></td>
        <td><strong>Type</strong></td>
        <td><strong>Maintenance Fee</strong></td>
      </tr>
      <tr>
        <td>2</td>
        <td>2</td>
        <td>743 sq ft</td>
        <td>$628,000</td>
        <td>r845621</td>
        <td>Highrise</td>
        <td>$299</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

数据表将永远不会轻易响应

如果您想响应，可以使用bootstrap数据表，我希望这对您有用。

Bootstrap Resonsive datatable

响应式表-包装纸或替代品

1 个答案: