大佬教程收集整理的这篇文章主要介绍了垂直和水平居中表格，并能够滚动它，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我试图将表格垂直和水平居中，同时能够滚动它。该代码在游戏中的嵌入式 Chromium 浏览器中运行，因此仅接受 Chrome 解决方案。
我尝试将显示设置为在 tbody 上阻止，但这不是解决方案，因为它会使内容向左延伸。
我目前的结果：
如您所见，溢出未正确处理，而我想在达到设置高度后获取滚动条。
body {
overflow: hIDden;
BACkground-color: transparent !important;
user-SELEct: none;
}
#wrap {
display: none;
position: absolute;
left: 30%;
top: 20%;
wIDth: 40%;
height: 60%;
BACkground-color: rgba(0,0.7);
Box-shadow: 0px 2px 5px 0px rgba(0,0.16),0px 2px 10px 0px rgba(0,0.12);
color: rgba(255,255,0.9);
}
table {
table-layout: fixed;
white-space: nowrap;
wIDth: 100%;
height: 100%;
text-align: left;
}
th {
padding-top: 10px;
height: 40px;
}
tr {
wIDth: 100%;
Font-size: 100%;
Font-family: 'Lato',sans-serif;
Font-weight: bold;
margin-top: 4px;
}
td {
padding-top: 6px;
white-space: nowrap;
overflow: hIDden;
text-overflow: ellipsis;
}
th,td {
padding-left: 25px;
}
tr.heading {
BACkground-color: rgb(117,0);
color: rgba(235,235,0.9);
margin-top: 4px;
margin-bottom: 4px;
text-shadow:
-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000;
}
thead {
wIDth: 100%;
}
tbody {
overflow-x: auto;
overflow-y: auto;
wIDth: 100%;
height: 100%;
}
tbody::-webkit-scrollbar {
wIDth: 12px;
}
tbody::-webkit-scrollbar-track {
BACkground: transparent;
}
tbody::-webkit-scrollbar-thumb {
BACkground: -webkit-linear-gradIEnt(rgb(160,0),rgb(80,rgb(160,0));
-webkit-text-fill-color: transparent;
}
.col-ID {
wIDth: 15%;
}
.col-name {
wIDth: 40%;
}
.col-xp {
wIDth: 15%;
}
.col-level {
wIDth: 15%;
}
.col-Ping {
wIDth: 15%;
}
<body>
<div ID="wrap">
<table ID="scoreboard" class="table">
</table>
</div>
</body>
您的溢出：隐藏不应该与您的正文标签相关，而是与您的桌子或#wrap 相关
以上是大佬教程为你收集整理的垂直和水平居中表格，并能够滚动它全部内容，希望文章能够帮你解决垂直和水平居中表格，并能够滚动它所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。