如何使用W3.CSS实现既支持小屏响应、又可在大屏下全宽显示的表格

解决方案 #

方案1：遵循W3.CSS官方规范调整结构（推荐） #

w3-responsive本质是响应式容器类，官方设计的用法是包裹在表格外层，而非直接加在<table>标签上。调整后即可同时满足小屏滚动、大屏占满的需求，修改后的代码如下：

<!-- 外层加响应式容器 -->
<div class="w3-responsive">
  <!-- 表格移除w3-responsive，新增w3-full类强制占满宽度 -->
  <table id="result" class="w3-table-all w3-hoverable w3-centered w3-card w3-full">
    <tr>
        <th>index</th>
        <th>date</th>
        <th>product</th>
        <th>variable</th>
        <th>status</th>
        <th>count</th>
        <th>stock</th>
        <th>user</th>
    </tr>
    <tr id="37172" class="table-data">
        <td>1</td>
        <td>2021/09/04</td>
        <td>something</td>
        <td>yellow</td>
        <td>In</td>
        <td>5</td>
        <td>0</td>
        <td>test</td>
    </tr>
  </table>
</div>

方案2：不调整结构，用自定义CSS覆盖默认样式 #

如果不想修改现有DOM结构，只要给对应表格加一行自定义样式即可：

#result.w3-responsive {
  width: 100% !important;
}

这个方案直接覆盖W3.CSS给w3-responsive表格设置的默认自适应宽度，强制让表格在所有尺寸下都占满父容器宽度，同时保留小屏横向滚动的能力。

内容的提问来源于stack exchange，提问作者Ahmad M