table header 和 body 尝试冻结时未正确对齐 header

Question

我的任务是让 header 在向下滚动时可见。
我找到了一种方法，使用 display:block;在我的 css 中 body.
现在我遇到的问题是 header 的列与 body.
的列不对齐我尝试了很多东西，但我还没有找到解决问题的方法。
我使用 bootstrap（对于用户名，...，用户函数 col-xs-12 col-lg-2 col-xl-2；对于上次登录，...，操作 col-xs-12 col-lg-2 col-xl-1).
这就是我现在 css.

中的内容

哦，如果 table 填满滚动条，那就太好了。

<div class="container">
            <t:grid
                source="users"
                class="table list-user thead-inverse table-hover"
                inplace="true"
                cellDecorators="cellDecorator"
                rowDecorators="rowDecorator"
                t:mixins="GridDecorator"
                model="modelUserList"
                row="user"
                pagerPosition="both"
                renderTableIfEmpty="true">
                <p:inventoryCell> 
                    ${inventoryString}
                </p:inventoryCell>
                <p:actionsCell>
                    <t:actionlink
                        t:id="editUser"
                        context="user.id"
                        t:zone="userEditZone">
                        <i class="icon-md ion-android-settings" />
                    </t:actionlink>
                    <t:if test="notSelf">
                        <t:actionlink
                            t:id="deleteUser"
                            t:mixins="confirm"
                            t:message="Are you sure you want to delete ${user.fullname}?" page="index"
                            context="user.id">
                            <i class="icon-md ion-trash-b" />
                        </t:actionlink>
                    </t:if>
                </p:actionsCell>
                <p:lastloginCell>${lastlogin}</p:lastloginCell>
            </t:grid>
        </div>

#userlist table .row
{
    margin-right: 0rem;
    margin-left: 0rem;
    table-layout:fixed; 
    text-overflow: ellipsis;

/*  flex-wrap:unset;*/
}

#userlist thead {
    display: inline;
}

#userlist tbody {
    display: block;
    height: 44.25rem;
    overflow: auto;
}
#userlist table .row td {
    word-break: break-all;
    border: none;
}
#userlist table .row th, #bestandlist table .row th {
    border: none;
    text-overflow: ellipsis;

}

<div data-container-type="zone">
   <table class="table list-user thead-inverse table-hover">
      <thead>
         <tr class="row hidden-md-down" data-inplace-grid-links="true">
            <th class="col-xs-12 col-lg-2 col-xl-2" data-grid-column="first" data-grid-column-sort="sortable" data-grid-property="username"></th>
            <th class="col-xs-12 col-lg-2 col-xl-2" data-grid-column-sort="sortable" data-grid-property="email"></th>
            <th class="col-xs-12 col-lg-2 col-xl-2" data-grid-column-sort="sortable" data-grid-property="userFunction"></th>
            <th class="col-xs-12 col-lg-2 col-xl-1" data-grid-column-sort="sortable" data-grid-property="lastLogin"></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column-sort="sortable" data-grid-property=""></th>
            <th class="col-xs-12 col-lg-1 col-xl-1" data-grid-column="last" data-grid-property="actions">Actions</th>
         </tr>
      </thead>
      <tbody>
         <tr class="row" data-grid-row="first">
            <td class="col-xs-12 col-lg-2 col-xl-2" data-grid-property="username"></td>
            <td class="col-xs-12 col-lg-2 col-xl-2" data-grid-property="email"></td>
            <td class="col-xs-12 col-lg-2 col-xl-2" data-grid-property="userFunction"></td>
            <td class="col-xs-12 col-lg-2 col-xl-1" data-grid-property="lastLogin">&nbsp;</td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property=""></td>
            <td class="col-xs-12 col-lg-1 col-xl-1" data-grid-property="actions"></td>
         </tr>
      </tbody>
   </table>
</div>

Answer 1

我用你的代码和 Bootstrap 3.3.7 做了一些测试（因为你使用的 classes 不是 Bootstrap 4，那些是 Bootstrap 3 classes）。我想做一些测试的主要原因是因为我对 Bootstrap 3 不像对 Bootstrap 4 那样熟悉。

无论如何，当使用您的代码和 Bootstrap 3 时，table header 和 body 列在我的情况下完全对齐。我说 "in my case" 是因为我不得不使用一些虚拟数据，因为您没有提供任何实际的 table 数据。我希望您明白，您确实需要将一些内容放入 table 中，以便能够在对齐等方面看到任何内容。

现在，虽然您的代码、我的虚拟 table 数据和 Bootstrap 3 的对齐方式看起来不错，但我不得不说您正在使用一些 Bootstrap class 错误。

你看，Bootstrap row class 和 col class 不是设计用于 HTML table秒！在这种情况下它有点（有点）有效，但这更像是一次意外。您不应将 row 和 col class 用于 HTML table 的任何元素。 HTML tables 有点像他们自己的动物，虽然 Bootstrap 确实为 HTML tables 提供了一些漂亮的样式，但它并没有使它们成为响应方式与正常 div 等相同。

Bootstrap 可以添加到 HTML table 的唯一 "responsiveness" 是 table 底部的水平滚动条。就是这样！换句话说，"responsive" Bootstrap HTML table 不会破坏您的布局，而是得到一种 iframe 之类的东西。这不仅仅是 Bootstrap，因为做这种事情是您真正可以用 HTML table 做的唯一事情。 table 用于表格数据。因此，不可能像 Bootstrap 操纵 div 那样操纵单个 table 单元格。那会毁掉整个table。

我不知道你能理解我在这里说的话。随时要求澄清。

table header 和 body 尝试冻结时未正确对齐 header

table header and body are not aligned correctly when trying to freeze header

html

css

tapestry

bootstrap-4