我正在尝试创建一个固定高度表，该表在附加一定数量的行后可以滚动。我创建了一个带有包含表的框的flexbox容器，我打算编写Javascript以使其无限滚动。
我面临的问题是，当桌子的高度超过盒子的边界，并且到达盒子的边缘后又无法滚动。
我希望表格保留在框内，并在表格的第n个数字行附加到框后，使其在框内滚动。
有没有办法做到这一点？
这是HTML：
<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="\css\core.css" media="screen" />
</head>
<body>
<div class="container">
<div class="box">
<div class="row">
<div class="column">
<table class="table">
<thead>
<tr>
<th>TIME</th>
<th>TICKER</th>
<th>CALL/PUT</th>
<th>EXPIRY</th>
<th>STRIKE</th>
<th>SPOT</th>
<th>PRICE</th>
<th>SIZE</th>
<th>PREMIUM</th>
<th>OI</th>
<th>IV</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tbody>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
这是CSS：
@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
@charset "utf-8";
body {
background-color: #060c17;
font-family: 'Overpass', sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #0c1427;
border: 2px solid #172340;
background-clip: border-box;
border-radius: 0.25rem;
}
.row {
display: flex;
}
.column {
padding: 10px;
display: flex;
height: 690px;
}
.table {
border-collapse: collapse;
margin: 20px;
font-size: 14px;
max-height: 0;
}
thead {
color: #7886a1;
}
tbody {
color: white;
}
.table thead tbody {
width: 950px;
}
.table thead th {
text-align: left;
border-bottom: 2px solid #262f43;
padding: 25px;
}
.table tbody td {
text-align: left;
border-bottom: 2px solid #262f43;
padding: 25px;
}
tbody tr:hover {
background-color: #060c17;
}
答案 0 :(得分：0)
将overflow: auto;设置为.box：
@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
body {
background-color: #060c17;
font-family: 'Overpass', sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #0c1427;
border: 2px solid #172340;
background-clip: border-box;
border-radius: 0.25rem;
overflow: auto;
}
.row {
display: flex;
}
.column {
padding: 10px;
display: flex;
height: 690px;
}
.table {
border-collapse: collapse;
margin: 20px;
font-size: 14px;
max-height: 0;
}
thead {
color: #7886a1;
}
tbody {
color: white;
}
.table thead tbody {
width: 950px;
}
.table thead th {
text-align: left;
border-bottom: 2px solid #262f43;
padding: 25px;
}
.table tbody td {
text-align: left;
border-bottom: 2px solid #262f43;
padding: 25px;
}
tbody tr:hover {
background-color: #060c17;
} <div class="container">
<div class="box">
<div class="row">
<div class="column">
<table class="table">
<thead>
<tr>
<th>TIME</th>
<th>TICKER</th>
<th>CALL/PUT</th>
<th>EXPIRY</th>
<th>STRIKE</th>
<th>SPOT</th>
<th>PRICE</th>
<th>SIZE</th>
<th>PREMIUM</th>
<th>OI</th>
<th>IV</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css2?family=Overpass&display=swap);
body {
background-color: #060c17;
font-family: 'Overpass', sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: #0c1427;
border: 2px solid #172340;
background-clip: border-box;
border-radius: 0.25rem;
}
.row {
display: flex;
}
.column {
padding: 10px;
display: flex;
height: 690px;
}
.table {
border-collapse: collapse;
margin: 20px;
font-size: 14px;
max-height: 0;
}
thead {
color: #7886a1;
}
tbody {
color: white;
}
.table thead tbody {
width: 950px;
}
.table thead th {
text-align: left;
border-bottom: 2px solid #262f43;
padding: 25px;
}
.table tbody td {
text-align: left;
border-bottom: 2px solid #262f43;
padding: 25px;
}
tbody tr:hover {
background-color: #060c17;
}
.column {
overflow:scroll;
height:300px;
}<!DOCTYPE html>
<html>
<head>
<title>#</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="\css\core.css" media="screen" />
</head>
<body>
<div class="container">
<div class="box">
<div class="row">
<div class="column">
<table class="table">
<thead>
<tr>
<th>TIME</th>
<th>TICKER</th>
<th>CALL/PUT</th>
<th>EXPIRY</th>
<th>STRIKE</th>
<th>SPOT</th>
<th>PRICE</th>
<th>SIZE</th>
<th>PREMIUM</th>
<th>OI</th>
<th>IV</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
<tr>
<td>00:12:34</td>
<td style="color: orange;">BTC</td>
<td style="color:#ff3366;">PUT</td>
<td>4/28</td>
<td>$7800</td>
<td>$7219</td>
<td>₿0.031</td>
<td>20</td>
<td>₿62</td>
<td>60.9%</td>
<td>1120</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>