Question

我正在为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;
}

Answer 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 */
}

Working fiddle here

纯CSS固定表头？

1 个答案: