[부트스트랩] Content

https://getbootstrap.com/docs/5.1/content/tables/

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

getbootstrap.com

.table

.table
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;

<div class="container-fluid form-control mt-3 bg-primary">.container</div>
<div class="container-fluid">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row">1</td>
                <td>1000</td>
                <td>AAA</td>
            </tr>
            <tr>
                <td scope="row">2</td>
                <td>1001</td>
                <td>BBB</td>
            </tr>
        </tbody>
    </table>
</div>

테이블 색상

.table-primary
.table-secondary
.table-success
.table-danger
.table-warning
.table-info
.table-light
.table-dark

.table-primary
    --bs-table-bg: #cfe2ff;
    --bs-table-striped-bg: #c5d7f2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bacbe6;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #bfd1ec;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #bacbe6;
    
.table-secondary
    --bs-table-bg: #e2e3e5;
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #cbccce;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #d1d2d4;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #cbccce;
    
...

<table class="table">
    <thead>
        <tr class="table-dark">
            <th scope="col">Class</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <td scope="row">.table-primary</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-secondary">
            <td scope="row">.table-secondary</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-success">
            <td scope="row">.table-success</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-danger">
            <td scope="row">.table-danger</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-warning">
            <td scope="row">.table-warning</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-info">
            <td scope="row">.table-info</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-light">
            <td scope="row">.table-light</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr class="table-dark">
            <td scope="row">.table-dark</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

.table-striped

줄무늬
.table-striped >(자식) tbody > tr > nth-of-type(odd): 홀수라면 > *(전체)를 적용하겠다
- --bs-table-accent-bg 속성 값은 .table 클래스의 --bs-table-striped-bg 값으로 변경
  - .table 클래스 --bs-table-striped-bg: rgba(0, 0, 0, 0.05)
- color 속성 값은 .table 클래스의 --bs-table-striped-color
  - .table 클래스 --bs-table-striped-color: #212529

.table-striped>tbody>tr:nth-of-type(odd)>*
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td>1001</td>
            <td>BBB</td>
        </tr>
    </tbody>
</table>

.table .table-dark .table-striped

.table-dark 클래스가 없고 행이 홀수 일 때 .table 클래스를 참조 했다면 여기서는 .table-dark 클래스를 참조함(상속)
.table-dark 클래스가 없고 행이 짝수 일 때 .table 클래스를 참조 했다면 여기서는 .table-dark 클래스를 참조함(상속)

.table-striped>tbody>tr:nth-of-type(odd)>*
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);

<table class="table table-dark table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td>1001</td>
            <td>BBB</td>
        </tr>
    </tbody>
</table>

table-hover

테이블의 행 위치에 마우스가 있을 때 동작
.table 클래스의 --bs-table-hover-color & --bs-table-hover-bg 의 값이 동작함

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td>1001</td>
            <td>BBB</td>
        </tr>
    </tbody>
</table>

td 2개의 열을 하나의 열로 병합하고, 테이블 활성화 표시

.table 클래스의 --bs-table-active-bg 값으로 변경
.table 클래스의 --bs-table-active-color 값으로 변경

.table-active
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td colspan="2" class="table-active">1001 BBB</td>
        </tr>
    </tbody>
</table>

.table-border

테이블 테두리
.table 클래스의 border-color: #dee2e6 값으로 렌더링
.table .table-bordered .border-primay 로 테두리 색상 변경 가능

.table
    border-color: #dee2e6;
    	border-top-color: rgb(222, 226, 230);
    	border-right-color: rgb(222, 226, 230);
    	border-bottom-color: rgb(222, 226, 230);
    	border-left-color: rgb(222, 226, 230);

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td colspan="2" class="table-active">1001 BBB</td>
        </tr>
    </tbody>
</table>

.table-sm

.table 각각의 Cell의 padding 기본 값은 0.5
.table-sm은 padding 값을 0.25로 줄여줌

.table-sm>:not(caption)>*>*
    padding: 0.25rem 0.25rem;

<table class="table table-sm">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td colspan="2" class="table-active">1001 BBB</td>
        </tr>
    </tbody>
</table>

테이블 셀 수직 정렬

.align-top
align-middle
align-bottom

.align-top
    vertical-align: top!important;
    
.align-middle
    vertical-align: middle!important;

.align-bottom
    vertical-align: bottom!important;

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody style="height:250px;">
        <tr class="align-top">
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr class="align-middle">
            <td scope="row">2</td>
            <td colspan="2">1001 BBB</td>
        </tr>
        <tr class="align-bottom">
            <td scope="row">3</td>
            <td>1002</td>
            <td>CCC</td>
        </tr>
    </tbody>
</table>

tfoot 요소

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td colspan="2" class="table-active">1001 BBB</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>tfoot1</td>
            <td>tfoot2</td>
        </tr>
    </tfoot>
</table>

caption 요소 & .caption-top

테이블의 제목과 같은 기능을 함
.caption-top

.caption-top
    caption-side: top;
    
caption 요소
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #6c757d;
    text-align: left;

<table class="table caption-top">
    <caption>테이블명</caption>
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td>1000</td>
            <td>AAA</td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td colspan="2" class="table-active">1001 BBB</td>
        </tr>
    </tbody>
</table>

.table-responsive{-sm | -md | -lg | -xl | -xxl}

overflow-x: auto; x축이 오버플로우 되었을 때 스크롤바 생성
sm, md, ... 크게 의미가 없어보이는데... div class="table-responsive table-responsive-sm ..."

.table-responsive
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
                <th scope="col">Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row">Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
                <td>Cell</td>
            </tr>
        </tbody>
    </table>
</div>

'부트스트랩' 카테고리의 다른 글

[부트스트랩] content - images (0)	2022.03.13
[부트스트랩] Content - Typography (0)	2022.03.13
[부트스트랩] Layout - Gutters (0)	2022.03.13
[부트스트랩] Layout - Columns (0)	2022.03.12
[부트스트랩] Layout - Grid (0)	2022.03.12

혼자 정리

[부트스트랩] Content - Tables

'부트스트랩' 카테고리의 다른 글

티스토리툴바

[부트스트랩] Content - Tables

'부트스트랩' 카테고리의 다른 글

'부트스트랩' Related Articles

티스토리툴바