我正在为CSS基础使用语义UI。 Here's a fiddle I've been working on
我无法通过Google搜索获得现有答案。他们似乎都有这个问题,右边有大量的空白。
我正在尝试让它工作,以便与现有的语义UI CSS很好地集成,看起来很好(没有空白),但我没有运气,我一直在努力一会儿。
如果这只适用于较新的浏览器,那就好了,因为我还是会使用电子。
这个CSS看起来像是必需的,但我不知道如何修改它以使我的工作正常:
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
答案 0 :(得分:1)
空白问题的来源似乎是ui
类。它上面有几个媒体查询,导致内容以较小的屏幕尺寸重新流动。如果您查看媒体查询,如果您将类可堆叠添加到您的表格中,它就不适用。
<table class="ui striped table unstackable">
此外,您只有4列,似乎您想要5.进行以下更改。
tbody td, thead th {
width: 140px !important;
}
thead th:last-child, tbody tr td:last-child{
width: 296px !important; /* 140px + 16px scrollbar width */
}