고정 높이 상자에 스크롤 가능한 표를 만드는 방법

debugcn 에 게시 Dev

qb217

특정 수의 행이 추가 될 때 스크롤 할 수있는 고정 높이 테이블을 만들려고합니다. 테이블이 포함 된 상자가있는 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;
}

아누 라그 스리 바스타 바

설정 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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

고정 높이 상자에 스크롤 가능한 표를 만드는 방법

고정 높이 상자에 스크롤 가능한 표를 만드는 방법

부모 (HTML + Bootstrap)에서 높이를 가져 오는 스크롤 가능한 테이블을 만드는 방법

스크롤 가능한 div를 스크롤하여 전체 높이로 확장하고 클릭하는 방법

Textview를 스크롤 가능하게 만들고 Android에서 스 와이프 가능하게 만드는 방법

CSS 만 사용하여 스크롤 가능한 div 내에서 고정 테이블 헤더 오버플로를 만드는 방법은 무엇입니까?

두 고정 위젯 사이에 스크롤 가능한 위젯을 만드는 방법

스크롤 가능한 div 안에 고정 헤더 테이블을 만드는 방법은 무엇입니까?

UICollectionView의 높이를 자동 크기 조정 및 스크롤 가능하게 만드는 방법은 무엇입니까?

Flutter에서 스크롤 가능한 상자를 만드는 방법은 무엇입니까?

Bootstrap에서 고정 콘텐츠를 스크롤 가능하게 만드는 방법

스크롤 뷰를 만드는 방법, iOS 스크롤시 특정 페이지에서 스크롤

특정 Div를 스크롤 가능하게 만드는 방법

CSS : 스크롤 가능한 div의 내용이 고정 된 div 뒤에 표시되는 것을 방지하는 방법

고정 메인 화면으로 스크롤 가능한 div를 만드는 방법은 무엇입니까?

VB.NET for WinForms에서 BackgroundImage 속성없이 사용자 지정 스크롤 가능한 사용자 컨트롤을 만드는 방법

매트 테이블에 높이를 지정하고 매트 행을 스크롤 가능하게 만듭니다.

div 높이를 스크롤 가능한 페이지 높이와 동일하게 만드는 방법은 무엇입니까?

수량 텍스트 상자 값이 데이터베이스에서 사용 가능한 재고보다 크면 MessageBox를 표시하는 방법

고정 헤더 및 스크롤 가능 테이블에 CSS를 작성하는 방법

컨테이너의 사용 가능한 높이를 모르고 스크롤 가능한 div 만들기

새 데이터가 추가 될 때 스크롤바를 항상 맨 아래에 고정하는 방법

특정 양의 픽셀에 대한 div 스크롤 : 스크롤 이벤트를 발생시키지 않고 div를 스크롤하는 방법

변수에 데이터를 추가하고 클릭 가능한 하이퍼 링크로 만드는 방법

Flutter에서 스크롤 가능한 행을 만드는 방법

Codeigniter 테이블에 대한 정렬 가능한 테이블 THEAD 링크를 만드는 방법

가로 스크롤 막대를 JScrollPane 상단에 고정하는 방법

창 중심 div에서 높이가 고정되지 않은 스크롤바를 활성화하는 방법은 무엇입니까?

자동 스크롤 가능한 TextView를 갖는 방법

페이지를 아래로 스크롤 할 때 고정 메뉴에 로고를 표시하는 방법

신속하게 iPhone 크기에 따라 스크롤 뷰를 키보드 높이까지 만드는 방법