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