我在让stickytableheaders库工作时遇到了很多麻烦。做了更多的搜索，我发现floatThead是一个积极维护的替代方案，具有最近的更新和更好的文档。

在一个窗口中支持多个可滚动表。

纯CSS &没有固定或粘性。

我正在搜索固定的表头与自动“td”和“th”宽度多年。最后我写了一些东西，这对我来说很好，但我不确定它对每个人都很好。

问题1:当我们有大量的“tr”时，我们不能设置表或表体高度，这是因为默认的表属性。

解决方法:为表设置一个显示属性。

问题2:当我们设置显示属性时，“td”元素的宽度不能等于“th”元素的宽度。而且在全宽表中很难正确地填充元素，比如100%。

解决方案:CSS“flex”是宽度和填充设置的很好的解决方案，所以我们将用CSS“flex”构建我们的tbody和thead元素。

.ea_table { border: 1px solid #ddd; display: block; background: #fff; overflow-y: hidden; box-sizing: border-box; float: left; height:auto; width: 100%; } .ea_table tbody, thead { flex-direction: column; display: flex; } .ea_table tbody { height: 300px; overflow: auto; } .ea_table thead { border-bottom: 1px solid #ddd; } .ea_table tr { display: flex; } .ea_table tbody tr:nth-child(2n+1) { background: #f8f8f8; } .ea_table td, .ea_table th { text-align: left; font-size: 0.75rem; padding: 1.5rem; flex: 1; } <table class="ea_table"> <thead> <tr> <th>Something Long</th> <th>Something </th> <th>Something Very Long</th> <th>Something Long</th> <th>Some</th> </tr> </thead> <tbody> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem </td> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> <tr> <td> Lorem Ipsum Dolar Sit Amet</td> <td> Lorem </td> <td> Lorem Ipsum </td> <td> Lorem </td> <td> Lorem Ipsum Dolar </td> </tr> </tbody> </table>

斯菲德尔

table { display: block; } thead, tbody { display: block; } tbody { position: absolute; height: 150px; overflow-y: scroll; } td, th { min-width: 100px !important; height: 25px !important; overflow:hidden !important; text-overflow: ellipsis !important; max-width: 100px !important; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden"> <table> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Username</th> <th>Password</th> <th>First Name</th> <th>Last Name</th> <th>Col16</th> <th>Col7</th> <th>Col8</th> <th>Col9</th> <th>Col10</th> <th>Col11</th> <th>Col12</th> <th>Col13</th> <th>Col14</th> <th>Col15</th> <th>Col16</th> <th>Col17</th> <th>Col18</th> </tr> </thead> <tbody> </tbody> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> <tr> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> <td>Long Value</td> <td>Title</td> </tr> </table> </div>`enter code here`

<style>

thead, tbody
{
    display: block;
}

tbody 
{
   overflow: auto;
   height: 100px;
}

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

我在让stickytableheaders库工作时遇到了很多麻烦。做了更多的搜索，我发现floatThead是一个积极维护的替代方案，具有最近的更新和更好的文档。

你应该尝试使用"display:block;"到tbody，因为现在它是内联块，为了设置高度，元素应该是"block"