当水平和垂直滚动条可用时修复表格标题答案

【问题标题】：fix the table header when horizontal and vertical scrollbar is available当水平和垂直滚动条可用时修复表格标题
【发布时间】：2017-04-26 00:43:30
【问题描述】：

我想修复 html 表格标题。我的表格中有很多列，因此需要垂直滚动条来滚动和查看列数据。我想修复表格标题，以便当用户向下滚动查看行时，标题是固定的。请找到演示http://jsfiddle.net/ZcLSE/1425/。当用户向下滚动时，表头应该是固定的并且对用户可见。请建议。

css代码：

.modal-body {
overflow-y: auto;
}
tbody {
}
thead, tbody tr {
}
thead {
    width: calc( 100% - 1em )
}
table {border-collapse:collapse; height:300px;overflow: auto;
    display: block;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

html代码：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table class="table" border="1">
        <thead>
            <tr>
                <td>Namffffffffffffffffffffffffe</td>
                <td>phone</td>
                <td>Address</td>
                <td>Street</td>
                <td>City</td>
                <td>Pin</td>
                <td>Comments</td>
                 <td>info</td>
                   <td>Amount</td>
                <td>percentage</td>
                 <td>total</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
             <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                 <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>

                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                                  <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
                        <tr>
                <td>AAAAdddddddddddddddddddddddd</td>
                <td>323232</td>
                <td>BBBBB</td>
                <td>aasdd</td>
                 <td>dfgdfg</td>
                 <td>1234</td>
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td>
                 <td>adasdsadasd</td>
                                  <td>12312</td>
                 <td>4</td>
                 <td>555</td>
            </tr>
        </tbody>
    </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

PS：垂直滚动条和水平滚动条都需要，表格的表头应该是固定的。

【问题讨论】：

HTML table with fixed headers?的可能重复
另外，请阅读How to Ask。关键词：“搜索和研究”和“解释......任何阻碍你自己解决的困难”。
@MikeMcCaughan - 它不是重复的，在那篇文章中他们使用的是 jquery，而我正在使用纯 CSS。我努力解决问题是当我添加水平滚动条时，固定标题不再起作用。
令人印象深刻的是，您能够如此迅速地完成该问题的所有 22 个答案。即使是这个：stackoverflow.com/a/25818428/215552，它只使用 HTML 和 CSS...也许你应该 edit 你的问题包括那个答案对你不起作用？

标签： html css

【解决方案1】：

我尝试过解决小提琴，我相信我遇到了和你一样的问题，thead 变得比容器大。

我会推荐这个JQuery Plugin，它是专门为您的需要而制作的。

【讨论】：

我不能使用任何其他插件，因为我的项目不允许这样做。我需要使用 html,css 修复它