HTML5 테이블에 스크롤 막대를 추가하는 방법은 무엇입니까?

HTML5 테이블에 스크롤 기능을 추가하는 방법

표시된 행 수가 제한된 테이블에 스크롤 막대를 추가하려면 다음 단계를 따르세요. :

1. 테이블 구조 정의:

필요한 열과 행이 포함된 기본 HTML5 테이블을 만듭니다. 예를 들면 다음과 같습니다.

2. 표 CSS 설정:

표 스타일을 지정하려면 CSS를 사용하여 크기, 색상 및 정렬을 지정합니다. 예:

#my_table {
    border-radius: 20px;
    background-color: transparent;
    color: black;
    width: 500px;
    text-align: center;
}

3. 스크롤바 만들기:

스크롤바를 추가하려면 테이블의 본문에 초점을 맞추세요. 이 섹션은 다음과 같이 구성해야 합니다.

tbody {
    overflow: auto;
    height: 150px;
}

• overflow: 자동으로 테이블 내용이 높이를 초과할 때 스크롤을 활성화합니다.
• height: 150px는 테이블의 표시 높이를 다음으로 설정합니다. 150픽셀, 한 번에 몇 개의 행만 표시되도록 보장 시간.

4. 열 정렬 유지:

표에 머리글 행이 있는 경우 스크롤할 때 본문과 정렬된 상태를 유지해야 합니다. 이는 tableSection 클래스의 두 요소를 모두 래핑하고 다음 CSS를 적용하여 달성할 수 있습니다.

table.tableSection {
    display: table;
    width: 100%;
}
table.tableSection thead, table.tableSection tbody {
    float: left;
    width: 100%;
}

5. 열 너비 조정(선택 사항):

내용에 관계없이 모든 테이블 열의 너비가 동일하도록 하려면 다음 CSS를 포함할 수 있습니다.

table.tableSection tr {
    width: 100%;
    display: table;
    text-align: left;
}
table.tableSection th, table.tableSection td {
    width: 33%;
}

6. 헤더에서 스크롤 막대 제거(선택 사항):

헤더를 스크롤할 수 없도록 하려면 다음 CSS 규칙을 추가하세요:

table.tableSection thead {
    overflow: hidden;
}

7. 스크롤 막대의 존재 여부 처리(선택 사항):

스크롤 막대의 존재 여부에 따라 CSS를 동적으로 조정하려면 JavaScript를 사용하여 스크롤 막대의 존재를 감지하고 필요한 스타일을 적용하는 것이 좋습니다.

위 내용은 HTML5 테이블에 스크롤 막대를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!