第 table 个标签的默认行为

Question

在大屏幕上，我的 table TH 位于顶部，但当我运行在移动设备上时，这些 TH 位于左侧。这是 table 的 TH 的默认行为吗？我正在使用 'responsive-table'.

的 Matrialize css class

  <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>[=11=].87</td>
      </tr>
      <tr>
        <td>Alan</td>
        <td>Jellybean</td>
        <td>.76</td>
      </tr>
      <tr>
        <td>Jonathan</td>
        <td>Lollipop</td>
        <td>.00</td>
      </tr>
    </tbody>
  </table>

Answer 1

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

Answer 2

是的，这是添加 responsive-table 的 class 时的默认行为。文档指出：

Add class="responsive-table" to the table tag to make the table horizontally scrollable on smaller screen widths.

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

来源：Tables in materialize.css

第 table 个标签的默认行为

Default behavior of th table tags

html

css

materialize