table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法
时间: 2024-01-07 18:00:52 浏览: 46
要实现table表格,让thead固定,tbody有滚动条,并且让它们的对齐,可以使用纯CSS来实现。首先,我们可以使用position: sticky;来让thead固定在顶部,然后设置overflow-y: scroll;来给tbody添加垂直滚动条。另外,为了保持它们的对齐,可以使用display: block;来使table元素变成块级元素,然后设置其宽度为100%,这样就可以确保thead和tbody的宽度一致。接下来,给tbody设置max-height来限制高度,当内容超出时才会出现滚动条。
下面是一个简单的示例:
```css
table {
display: block;
width: 100%;
}
thead {
position: sticky;
top: 0;
background-color: #f1f1f1;
}
tbody {
display: block;
max-height: 200px; /* 设置最大高度 */
overflow-y: auto; /* 添加滚动条 */
}
td, th {
padding: 8px;
text-align: left;
}
```
这样就可以实现一个table表格,让thead固定,tbody有滚动条,并且它们的对齐方式是一致的纯CSS写法。
相关问题
bootstrap table thead固定,tbody垂直滚动条
要实现 Bootstrap Table 的表头固定,而表体(tbody)部分带有垂直滚动条,可以通过以下步骤完成:
1. 在表格外层添加一个 div 容器,并设置样式 position: relative。
2. 在 div 容器内部添加一个固定位置的表头(thead)元素,并设置样式 position: absolute 和 top: 0。
3. 在 div 容器内部再添加一个滚动容器(overflow: auto),并将表体(tbody)元素放置其中。
4. 设置滚动容器的高度(height),使其可以出现垂直滚动条。
5. 在表格中设置固定宽度(width),以保证表头和表体的列宽一致。
以下是一个示例代码:
```
<div style="position: relative;">
<table class="table" style="width: 100%;">
<thead style="position: absolute; top: 0;">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
</table>
<div style="height: 200px; overflow: auto;">
<table class="table" style="width: 100%;">
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<!-- more rows... -->
</tbody>
</table>
</div>
</div>
```
请注意,以上示例代码仅供参考,具体实现方式可能因为 Bootstrap Table 的版本和样式等因素而有所不同。
table下tbody滚动条与thead对齐的方法且每一列可以不均等
要实现table下的tbody滚动条与thead对齐的效果,可以使用以下方法:
1. 将thead与tbody分开放到两个div中,一个div用于显示thead,另一个div用于显示tbody,这两个div都设置为相同的宽度。
2. 对于tbody所在的div,设置overflow属性为auto,这样当tbody内容超出div的高度时,会自动生成滚动条。
3. 针对每一列,可以通过设置不同的宽度来实现不均等。
具体实现代码如下:
HTML代码:
```
<div class="table-container">
<div class="thead-container">
<table>
<thead>
<tr>
<th style="width: 100px;">列1</th>
<th style="width: 200px;">列2</th>
<th style="width: 150px;">列3</th>
<th style="width: 50px;">列4</th>
</tr>
</thead>
</table>
</div>
<div class="tbody-container">
<table>
<tbody>
<tr>
<td style="width: 100px;">内容1</td>
<td style="width: 200px;">内容2</td>
<td style="width: 150px;">内容3</td>
<td style="width: 50px;">内容4</td>
</tr>
<tr>
<td style="width: 100px;">内容1</td>
<td style="width: 200px;">内容2</td>
<td style="width: 150px;">内容3</td>
<td style="width: 50px;">内容4</td>
</tr>
<!-- more rows -->
</tbody>
</table>
</div>
</div>
```
CSS代码:
```
.table-container {
display: flex;
flex-direction: column;
height: 300px; /* 设置表格高度 */
}
.thead-container {
overflow: hidden;
height: 30px; /* 设置表头高度 */
}
.thead-container table {
width: 100%; /* 与tbody-container同宽 */
border-collapse: collapse;
}
.tbody-container {
flex: 1;
overflow: auto; /* 当tbody内容超出div高度时,显示滚动条 */
}
.tbody-container table {
width: 100%; /* 与thead-container同宽 */
border-collapse: collapse;
}
.tbody-container td,
.tbody-container th {
white-space: nowrap; /* 防止文字换行 */
}
```
通过以上代码,就可以实现thead与tbody对齐,并且每一列可以不均等的效果。