使table横轴滚动的方法
时间: 2023-10-25 09:07:45 浏览: 100
JS实现table表格固定表头且表头随横向滚动而滚动
可以使用CSS中的`overflow-x`属性来实现table横轴滚动。
首先,将包含table的容器设置为固定宽度,并且设置`overflow-x: auto;`。这将使容器出现水平滚动条,当table的宽度大于容器的宽度时,用户可以通过滚动条来滚动table。
然后,将table设置为`display: inline-table;`。这将使table表现为内联元素,使其适应容器的宽度,并允许table在容器内滚动。
最后,确保table的列宽度均匀,并且不设置固定宽度。这将使表格适应容器的宽度,并且可以自动调整列宽度以适应表格内容。
下面是一个示例代码:
HTML:
```
<div class="table-container">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<!-- more rows -->
</tbody>
</table>
</div>
```
CSS:
```
.table-container {
width: 100%;
overflow-x: auto;
}
table {
display: inline-table;
}
th, td {
padding: 10px;
text-align: left;
white-space: nowrap;
}
```
通过以上方法,你就可以使table横轴滚动了。
阅读全文