Question

在大屏幕上，我的桌子TH位于顶部，但是当我在移动设备上运行时，那些TH会移到左侧。这是表格TH的默认行为吗？我正在使用Matrialize css类＆＃39; responsive-table＆＃39;。

  <table class="responsive-table">
    <thead>
      <tr>
          <th data-field="id">Name</th>
          <th data-field="name">Item Name</th>
          <th data-field="price">Item Price</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Alvin</td>
        <td>Eclair</td>
        <td>$0.87</td>
      </tr>
      <tr>
        <td>Alan</td>
        <td>Jellybean</td>
        <td>$3.76</td>
      </tr>
      <tr>
        <td>Jonathan</td>
        <td>Lollipop</td>
        <td>$7.00</td>
      </tr>
    </tbody>
  </table>

Answer 1

默认行为只会使您的表格标题变为粗体，但不应使它们向左移动。它向左移动，因为您使用的是响应式设计样式表。

Answer 2

是的，这是添加responsive-table类时的默认行为。文档说明：

将class =“responsive-table”添加到表标记以生成表可在较小的屏幕宽度上水平滚动。

养成检查文档的习惯！我从来没有使用过物化，但我通过搜索他们的网站很快就找到了答案。

来源：Tables in materialize.css

表标签的默认行为

2 个答案: