用户是否可以在这个表格中左右滚动？现在，没有滚动条出现，我错过了右侧的数据。
演示:
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>最佳答案
移除 width:100% class .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>关于html - 在 HTML 表格上从左向右滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52556263/