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

Z时代
2024-01-10
分类：问答

这是例子：语义UI，响应水平表unstackable，单行线，带滚动

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

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

桌面模式下的桌面：

表中移动模式：

我使用display: block上表。正如你所看到的，它适用于手机模式，但不适用于桌面模式。为什么？

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

回答：

媒体查询

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