语义UI，响应式水平表不堆叠，单行，带滚动

Question

这是一个例子：

https://plnkr.co/edit/WRXGNFlG1FWrF8rtIVU4?p=preview

您可以调整窗口大小以查看我的意思：

• 桌面模式下的表格

• 移动模式下的表格

我正在桌面上使用display: block。它可以在移动模式下运行良好，但不能在桌面模式下运行，如您所见。为什么呢？

我们可以解决这个小问题吗？

Answer 1

媒体查询

@media (min-width:320px)  { table { display: block; } }
@media (min-width:960px)  { table { display: table; } }

这是一个简单的示例，但您可以根据您的特定需求调整断点。

表格包装

如果你的表格太宽，你可以在表格周围添加一个带有overflow-x：auto的容器元素，并在需要时显示一个水平滚动条。调整浏览器窗口的大小以查看效果。尝试删除div元素，看看表中会发生什么。

＆＃13;

＆＃13;

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

＆＃13;

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

您的示例的分叉版本：https://plnkr.co/edit/irZUV08VdBYUemFiMiwI?p=preview