javascript - 在表格之间切换时如何保持表格的位置不变

Question

第一次发帖，如有不妥请见谅...

我有两张表——一张记录我库存的木材，另一张列出将使用该木材的项目。

我设置了一个切换开关来更改显示哪个表格，但这会导致表格的位置在其垂直位置上移动。一张桌子比另一张大，所以我理解它为什么会改变……但我不确定控制这种改变的最佳方法是什么。如果可能的话，我想停止这个动作。

注意：我是 HTML/CSS/JavaScript 的新手，所以那里可能有很多乱七八糟的东西。我试图组织它，评论等。

JSFiddle：[ https://js https://jsfiddle.net/L6sdgcrq/

/*
Start table styling block
*/
.tableStats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
}

.tableContainer {
    width: 95%;
    display: flex;
    justify-content: center;
}

#woodTable {
    width: 1200px;
    max-height: 400px;
    display: table;
    justify-content: center;
    border-radius: 15px;
    border-collapse: unset;
    margin-top: 15px;
    margin-bottom: auto;
    padding: 10px !important;
    background-color: lightgray;
    border-bottom: none;
}

#projectTable {
    width: 1200px;
    max-height: 400px;
    display: none;
    justify-content: center;
    border-radius: 15px;
    border-collapse: unset;
    margin-top: 15px;
    margin-bottom: auto;
    padding: 10px !important;
    background-color: lightgray;
    border-bottom: none;
}

th {
    padding: 15px;
    margin: 10px;
    border-bottom: 2px solid black;
    border-radius: 2px;
}

td {
    text-align: center;
    padding: 5px;
}

tr {
    padding: 10px;
}

tr:last-child, td:last-child {
    border-bottom: none;
}

td:nth-child(n+1) {
    border-left: 2px solid black;
}

th:first-child, td:first-child {
    border-left: none;
}

.smaller {
    width: 50px;
}

/*
End table styling block
*/

如果您滚动到执行部分的窗口顶部，您会看到我在说什么。

标签： javascripthtmlcss