0

我正在尝试将表格垂直和水平居中，同时能够滚动它。该代码在游戏的嵌入式 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, 0, 0.7);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
    color: rgba(255, 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, 0);
    color: rgba(235, 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, 0), rgb(80, 0, 0), rgb(160, 0, 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>
4

1 回答 1

0

你的溢出：隐藏不应该与你的身体标签相关，而是你的桌子或#wrap

于 2021-03-01T11:16:50.967 回答