在HTML表上从左到右滚动
在HTML表上从左到右滚动
提问于 2018-09-28 13:17:29
用户可以在这个表中左右滚动吗？现在，没有滚动条出现，我错过了右边的数据。
演示：
https://jsfiddle.net/6wf0te1d/
代码：
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
overflow-x:hidden
}<div class="container" style="margin-top: 1rem;">
<div class="row">
<div class="generic__content col-xs-12 col-lg-12">
<style type="text/css">
.table tr td:first-child, .table thead tr td {
font-weight:bold;
}
.table tbody tr td {
border-right:1px solid black;
}
.table tbody tr td:last-child {
border-right:0;
}
table tr td:nth-child(2), table tr td {
text-align:center;
}
table img {
height: 50px;
display: block;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
}
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 100%;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 140px;
}
</style>
<!--<div style="overflow-x:auto;">-->
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="table table-striped zui-table">
<thead style="background:#FCE6E7">
<tr>
<td style="padding:0!important"> </td>
<td><img src="coffee.svg">Cup of coffee</td>
<td><img src="beer.svg">Local beer/lager</td>
<td><img src="can-of.svg">Can of coca-cola</td>
<td><img src="glass-wine.svg">Glass of wine</td>
<td><img src="mineral-water.svg">Still mineral water</td>
<td><img src="suncream.svg">Sun cream</td>
<td><img src="insect.svg">Insect repellent</td>
<td><img src="burger.svg">2 course lunch for 2</td>
<td><img src="evening-meal.svg">3 course evening meal for 2</td>
<td><img src="taxi.svg">Taxi ride</td>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">Bulgaria</td>
<td>£1</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Turkey</td>
<td>£2</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Portugal</td>
<td>£3</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Spain</td>
<td>£4</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Greece</td>
<td>£5</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Cyprus</td>
<td>£6</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Croatia</td>
<td>£7</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Malta</td>
<td>£8</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">France</td>
<td>£9</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Italy</td>
<td>£10</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
</tbody>
</table>
</div>
</div>
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-09-28 13:20:28
移除宽度:100%类..zui scroller
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
overflow-x:hidden
}<div class="container" style="margin-top: 1rem;">
<div class="row">
<div class="generic__content col-xs-12 col-lg-12">
<style type="text/css">
.table tr td:first-child, .table thead tr td {
font-weight:bold;
}
.table tbody tr td {
border-right:1px solid black;
}
.table tbody tr td:last-child {
border-right:0;
}
table tr td:nth-child(2), table tr td {
text-align:center;
}
table img {
height: 50px;
display: block;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
}
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 140px;
}
</style>
<!--<div style="overflow-x:auto;">-->
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="table table-striped zui-table">
<thead style="background:#FCE6E7">
<tr>
<td style="padding:0!important"> </td>
<td><img src="coffee.svg">Cup of coffee</td>
<td><img src="beer.svg">Local beer/lager</td>
<td><img src="can-of.svg">Can of coca-cola</td>
<td><img src="glass-wine.svg">Glass of wine</td>
<td><img src="mineral-water.svg">Still mineral water</td>
<td><img src="suncream.svg">Sun cream</td>
<td><img src="insect.svg">Insect repellent</td>
<td><img src="burger.svg">2 course lunch for 2</td>
<td><img src="evening-meal.svg">3 course evening meal for 2</td>
<td><img src="taxi.svg">Taxi ride</td>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">Bulgaria</td>
<td>£1</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Turkey</td>
<td>£2</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Portugal</td>
<td>£3</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Spain</td>
<td>£4</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Greece</td>
<td>£5</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Cyprus</td>
<td>£6</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Croatia</td>
<td>£7</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Malta</td>
<td>£8</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">France</td>
<td>£9</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
<tr>
<td class="zui-sticky-col">Italy</td>
<td>£10</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
<td>£</td>
</tr>
</tbody>
</table>
</div>
</div>
Stack Overflow用户
发布于 2018-09-28 13:21:26
这样做：
table {
width: 500px;
overflow-x: scroll;
}Stack Overflow用户
发布于 2018-09-28 13:23:02
向您添加代码：
.zui-wrapper {
overflow-x: auto;
}从代码中删除：
.zui-scroller {
overflow-x: scroll;
overflow-y: visible;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52556263
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号