语义UI,响应水平表unstackable,单行线,带滚动
问题描述:
这是例子:语义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>
分叉您的示例的版本:https://plnkr.co/edit/irZUV08VdBYUemFiMiwI?p=preview
我不能完成我的表在另一个DIV因为'attached'类的... –
因此,我建议第一我的两个建议;媒体查询。 –
是的,但媒体查询不是一个好的解决方案。在中间像素中,我遇到了问题。 –