马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
千辛万苦在网上找了一段代码， table 固定行列的 。
发现它没有横向滚动条。。。。
万能鱼友们， 求给这段代码 在table上 加个横向的滚动条。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
border-collapse: collapse;
}
.sticky-table {
overflow: auto;
height: 100%; /* 设置固定高度 */
width: 100%;
position: absolute
}
.sticky-table td, .sticky-table th {
/* 设置td,th宽度高度 */
border: 1px solid #c7d8ee;
width: 150px;
min-width: 150px;
height: 30px;
padding: 5px;
}
.sticky-table th {
position: sticky;
top: 0; /* 首行永远固定在头部 */
background-color: #eaf4ff; /*设置表头背景色*/
}
.sticky-table td:first-child, .sticky-table th:first-child {
position: sticky;
left: 0; /* 首列永远固定在左侧 */
z-index: 1;
background-color: #eaf4ff;
}
.sticky-table th:first-child {
z-index: 2; /*表头的首列要在上面*/
}
.sticky-table th > div {
width: 100%;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
}
/*.sticky-table table {
table-layout: fixed;
}*/
</style>
</head>
<body style="padding: 0px;margin: 0px;">
<div class="sticky-table">
<table>
<thead>
<tr>
<th></th>
<th colspan="8">个人素养</th>
<th colspan="4">社群素养</th>
<th colspan="8">职业素养</th>
</tr>
<tr>
<th></th>
<th colspan="2">身体素质</th>
<th colspan="2">艺术修养</th>
<th colspan="2">心理素质</th>
<th colspan="2">道德修为</th>
<th colspan="2">爱国与责任意识</th>
<th colspan="2">法律与环保意识</th>
<th colspan="6">基本职业素质</th>
<th colspan="2">企业文化与创新精神</th>
</tr>
<tr>
<th>姓名</th>
<th>
<div>基本身体情况</div>
</th>
<th>
<div>体育特长能力</div>
</th>
<th>
<div>艺术审美</div>
</th>
<th>
<div>爱好特长</div>
</th>
<th>
<div>心理健康</div>
</th>
<th>
<div>自我调节</div>
</th>
<th>
<div>自信自强、诚实守信</div>
</th>
<th>
<div>文明素养、个人行为规范</div>
</th>
<th>
<div>爱国意识</div>
</th>
<th>
<div>责任心及服务意识</div>
</th>
<th>
<div>法律意识</div>
</th>
<th>
<div>环保意识</div>
</th>
<th>
<div>语言表达能力及口语特长</div>
</th>
<th>
<div>自我管理，自我激励</div>
</th>
<th>
<div>发展规划能力</div>
</th>
<th>
<div>信息技术能力</div>
</th>
<th>
<div>沟通能力</div>
</th>
<th>
<div>团队合作能力</div>
</th>
<th>
<div>企业文化学习</div>
</th>
<th>
<div>创新能力、解决问题能力</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
<tr>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
你这个有横向滚动条的，只不过滚动条在 .sticky-table的最底下，你又设置的.sticky-table的height为100%，所以滚动条跑最下边了
，只需要改动一下就看到了
.sticky-table里的height改成85%
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2022-12-9 15:20:41
置顶卡
千斤顶
显身卡
发表于 2022-12-10 18:49:42
