语义UI，响应水平表unstackable，单行线，带滚动

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; } } 

这是一个简单的例子，但你能适应断点为您的特定需求。

表包装

如果你有一个表，太宽，你可以用溢出-X添加一个容器元素：自动围着桌子，并在需要时它会显示一个水平滚动条。调整浏览器窗口大小以查看效果。尝试删除div元素，看看表发生了什么。

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}

<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>

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