Я пытаюсь создать таблицу с фиксированной высотой, которая становится прокручиваемой при добавлении к ней определенного количества строк. Я создал контейнер 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;
}