HTML垂直滚动条仅在水平滚动条在右侧时可见

Question

我有<div>个表格中的表头固定。但是该表大于父表（垂直和水平方向），因此必须有滚动条。但是，垂直滚动条仅在水平滚动条在右侧时可见。 Here是小提琴。

是否可以将垂直滚动条“粘贴”到父级的右边缘？

• 垂直滚动条仅适用于表主体。
• 水平滚动条既适用于正文又适用于标题。
• 我不能使用position: fixed，因为表格的位置是相对于页面的。

.container {
  overflow-y: hidden;
  overflow-x: scroll;
  width: 300px;
}

.table {
  height: 150px;
  width: 400px;
}

.body {
  height: calc(100% - 50px);
  overflow-y: scroll;
}

.row {
  display: flex;
}

.cell {
  background-color: lightgray;
  border: 1px solid black;
  height: 50px;
  width: 200px;
}

<div class="container">
    <div class="table">
        <div class="header">
            <div class="row">
                <div class="cell">
                    Header 1
                </div>
                <div class="cell">
                    Header 2
                </div>
            </div>
        </div>
        <div class="body">
        
            <div class="row">
                <div class="cell">
                    Cell 1
                </div>
                <div class="cell">
                    Cell 2
                </div>
            </div>
            
            <div class="row">
                <div class="cell">
                    Cell 3
                </div>
                <div class="cell">
                    Cell 4
                </div>
            </div>
            
            <div class="row">
                <div class="cell">
                    Cell 5
                </div>
                <div class="cell">
                    Cell 6
                </div>
            </div>
            
        </div>
    </div>
</div>

Answer 1

也许值得一看，引导程序如何处理水平滚动。

https://getbootstrap.com/docs/4.0/content/tables/#always-responsive

它们将表包装在div中，以允许整个表向左/向右滚动。 app.post('/users', (req, res) => { const { username, password } = req.body; db.get( `SELECT id FROM Users WHERE username = ?`, [username], (err, row) => { if (err) { console.error(err); return res.sendStatus(500); } else if (row) { return res.status(400).send('Username already exist.'); } db.run( `INSERT INTO Users (username, password) VALUES (?, ?)`, [username, password], (err) => { if (err) { console.error(err); return res.sendStatus(500); } console.log(this); // prints {} to the console res.send(this.lastID); // response body is empty } ); } ); });

请参见此处的固定标头示例。 https://jsfiddle.net/joshmoto/xhao3k9m/

<div class="table-responsive"></div>

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css";


.container {
  padding: 30px;
}

table {
  width: 150% !important;
  /* test width to make table wider */
}

thead, tbody, tr, td, th {
  display: block;
}

tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

thead th {
  height: 50px;
  /* table header height */
}

tbody {
  height: 120px; /* table height */
  overflow-y: auto;
}

tbody td, thead th {
  width: 50%; /* column widths */
  float: left;
}