[英]Scroll left-to-right on HTML Table
用户是否可以在此表中向左和向右滚动？ 目前，没有滚动条出现，并且我错过了右侧的数据。
演示：
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>
去除宽度：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>
做这个：
table {
width: 500px;
overflow-x: scroll;
}
添加代码：
.zui-wrapper {
overflow-x: auto;
}
从您的代码中删除：
.zui-scroller {
overflow-x: scroll;
overflow-y: visible;
}
您的问题在这里：
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 100%;
}
更改宽度：自动更改为100％
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: auto;
}
HTML中的div容器可以从左到右和从右到左拖动调整宽度吗？
[英]The div container in HTML can be drag to resize width from left-to-right and right-to-left?
如何将 Angular HTML 文件的默认位置从“从左到右”更改为“从右到左”？
[英]How to change the default positioning of Angular HTML files from “left-to-right” to “right-to-left”?
有没有办法在没有 CSS Flex 的情况下从上到下和从左到右显示 HTML 列表？
[英]Is there a way to display HTML lists top-to-bottom vs left-to-right without CSS Flex?
如何在html中模拟冻结的列：在右表中的鼠标滚轮上滚动左表
[英]How to emulate frozen columns in html: scroll left table on mouse wheel in right table
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.