Question

我的任务是在向下滚动时使标题可见我已经找到了一种方法来使用display：block;在我的身体css 现在我遇到的问题是标题的列没有与正文中的列对齐我尝试了很多东西，但我还没有办法解决我的问题我使用bootstrap（对于用户名，...，用户函数col-xs-12 col-lg-2 col-xl-2;对于最后一次登录，...，action col-xs-12 col-lg-2 col- XL-1）。
这就是我现在在我的CSS中的内容。

哦，当桌子填满滚动条时，它会非常好。

<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进行了一些测试（因为你使用的类不是Bootstrap 4，那些是Bootstrap 3类）。我想做一些测试的主要原因是因为我不像Bootstrap 4那样熟悉Bootstrap 3。

无论如何，在使用你的代码和Bootstrap 3时，表头和body列在我的情况下完全对齐。我在说＃34;在我的情况下＆＃34;因为我没有提供任何实际的表数据，所以我必须使用一些虚拟数据。我希望您明白，您确实需要将一些内容放入表中，以便能够在对齐等方面看到任何内容。

现在，虽然对齐看起来没有你的代码，我的虚拟表数据和Bootstrap 3，但我不得不说你正在使用一些Bootstrap类错误。

您看，Bootstrap row类和col类不适用于HTML表格！在这种情况下它有点工作（但有点），但这比其他任何事情都更容易发生。您不应该将row和col类用于HTML表的任何元素。 HTML表格本身就是一种动物，而Bootstrap确实为HTML表格提供了一些不错的样式，它不会像普通div那样使它们响应。

唯一的响应能力＆＃34; Bootstrap可以添加到HTML表格是表格底部的水平滚动条。那就是它！换句话说，而不是打破你的布局＆＃34;响应＆＃34; Bootstrap HTML表获得了一种iframe类型的东西。而且这不仅仅是Bootstrap，因为做这类事情是你唯一可以用HTML表做的事情。表格用于表格数据。因此，以与Bootstrap操作div相同的方式操纵单个表格单元是不可能的。这会破坏整个桌子。

我不知道你对我在这里说的话有多大意义。随意要求澄清。

尝试冻结标头时，表头和正文未正确对齐

1 个答案: