表格的滚动条 [英] Scrollbar for Table
本文介绍了表格的滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个系统: https://jsfiddle.net/p2fs68gm/2
我想为表格添加滚动条.但是，一旦将thead或tbody制成display: block，它们的宽度就会减小.我尝试固定tbody的高度并使overflow: auto.但是，它不起作用.
I want to add scrollbar for the table. But, as soon as thead or tbody is made display: block, their width gets reduced. I have tried fixing height of tbody and make overflow: auto. But, its not working.
推荐答案
将您的table包裹在div内，应该将其设置为overflow:auto;height:80vh
wrap your table inside div and it shoud be set overflow:auto;height:80vh
table thead tr th {
background-color: white;
position: sticky;
z-index: 100;
top: -1px;
}
.container {
margin: 50px;
}
.container h1 {
color: #2f4f6f;
}
.list {
border: 1px solid #6c7ae0;
width: 100%;
margin-top: 20px;
padding: 0;
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 0 70px #bbb, 0 0 30px #6c7ae0;
}
.list tr {
border: 1px solid #ddd;
padding: 5px;
}
.list tr:hover {
background-color: #ddd;
}
.list th,
.list td {
padding: 10px;
text-align: center;
}
.list td {
color: #333;
}
.list tr td {
font-size: 18px;
}
.list th {
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
background-color: #6c7ae0;
color: white;
}
.list td a {
color: #0000cd;
text-decoration: none;
font-weight: 600;
}
.list td a:hover {
color: #191970;
font-size: 20px;
font-weight: bold;
}
.list td a img {
transition: all .2s ease-in-out;
}
.list td a img:hover {
transform: scale(1.5);
}
.list .ID {
width: 200px;
}
.ID {
font-weight: bold;
}
.list .standings {
width: 200px;
}
.standings_logo img {
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="overflow:auto;height:80vh">
<table class="list" style="overflow:auto;">
<thead>
<tr class="sticky-top">
<th class="ID">ID</th>
<th class="name">Name</th>
<th class="standings">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
<tr>
<td data-label="ID" style="font-weight: bold;">ID_1</td>
<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
<td data-label="Standings">
<a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
这篇关于表格的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
