向表格添加水平和垂直滚动
Posted
技术标签:
【中文标题】向表格添加水平和垂直滚动【英文标题】：Adding horizontal and vertical scrolling to a table 【发布时间】：2017-06-19 19:01:24 【问题描述】：我有一张桌子：
<div>
<div className="shadow-z-1">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
...
</div>
我目前正在使用以下样式表对其进行样式设置：
.shadow-z-1
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
.table
width: 100%;
max-width: 100%;
margin-top: 1rem;
margin-bottom: 2rem;
background-color: #fff;
>
thead > tr, tbody > tr, tfoot > tr
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td
text-align: left;
padding: 1.6rem;
vertical-align: top;
border-top: 0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
thead > tr > th
font-weight: 400;
color: #757575;
vertical-align: bottom;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
caption + thead > tr:first-child > th, colgroup + thead > tr:first-child > th, thead:first-child > tr:first-child > th, caption + thead > tr:first-child > td, colgroup + thead > tr:first-child > td, thead:first-child > tr:first-child > td
border-top: 0;
tbody + tbody
border-top: 1px solid rgba(0, 0, 0, 0.12);
.table
background-color: #fff;
.no-border
border: 0;
.table-condensed >
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td
padding: 0.8rem;
.table-bordered
border: 0;
>
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td
border: 0;
border-bottom: 1px solid #e0e0e0;
thead > tr >
th, td
border-bottom-width: 2px;
.table-striped > tbody > tr:nth-child(odd) >
td, th
background-color: #f5f5f5;
.table-hover > tbody > tr:hover >
td, th
background-color: rgba(0, 0, 0, 0.12);
这工作正常，但我现在要做的是在表格中添加垂直和水平滚动。对于垂直滚动，我想保持标题固定，所以我知道我需要给表格主体一个确定的高度，但我不知道我应该在我的样式表中做什么。对于水平滚动，我真的不知道从哪里开始。我希望能够保持所有列的宽度相同，这样如果添加另一个列，而不是被挤压到定义的区域，水平滚动条就会显示出来。
理想情况下，我希望仅使用 css（或在我的情况下为 SaSS）来实现这一目标。
对此的任何帮助将不胜感激！
感谢您的宝贵时间。
【问题讨论】：
【参考方案1】：这是一个css代码：
.scroll-table-container
border:2px solid green;
height: 300px;
overflow: scroll;
.scroll-table, td, th
border-collapse:collapse;
border:1px solid #777;
min-width: 300px;【讨论】：
【参考方案2】：检查这个例子：
<html>
<head>
<style>
divdisplay:inline-block;height:46px;overflow:scroll
tablebackground:gray
tdbackground:green
td,thwidth:100px
thbackground:orange
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</table>
<div>
<table>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Doe</td>
</tr>
<tr>
<td>3</td>
<td>Josh</td>
<td>Doe</td>
</tr>
<tr>
<td>4</td>
<td>Joana</td>
<td>Doe</td>
</tr>
</table>
</div>
</body>
</html>
【讨论】：
以上是关于向表格添加水平和垂直滚动的主要内容，如果未能解决你的问题，请参考以下文章