Cách tạo bảng cuộn từ thẻ Div bằng CSS không có thẻ bảng

Làm cách nào để sử dụng thuộc tính 'hiển thị' để biểu thị bảng?

Bảng bên dưới cung cấp cho bạn mối quan hệ giữa thẻ ' table ' và thuộc tính CSS được hỗ trợ tương ứng để biểu thị cùng một phần tử. Vì vậy, khi tạo bảng, tất cả những gì bạn cần làm là, thay vì thẻ HTML ' table ', chỉ cần sử dụng thẻ ' div ' và thêm CSS tương ứng để hiển thị bảng.

<bảng>	{hiển thị:bảng}
<tr>	{hiển thị: bảng-hàng}
<thead>	{display: table-header-group}
<tbody>	{hiển thị: bảng-hàng-nhóm}
<chân>	{hiển thị: table-footer-group}
<col>	{hiển thị: bảng-cột}
<nhóm>	{hiển thị: bảng-cột-nhóm}
<td>, <th>	{hiển thị: ô bảng}
<chú thích>	{hiển thị: chú thích bảng}

Bước 1: Tạo Master Div cho Table

HTML

<div class="d-tbl"></div>

CSS

.d-tbl {
    width: 100%;
    display: table;
    border-collapse: collapse;
}

Bước 3: Tạo Table Caption, Header, Body, Footer

HTML

<div class="d-tbl">
    <div class="d-tbl-head"></div>
    <div class="d-tbl-body">/div>
    <div class="d-tbl-foot"></div>
</div>

CSS

.d-tbl-caption{
    display: table-caption;
    text-align: center;
    font-weight: bold;
}
.d-tbl-head,
.d-tbl-foot {
    display: table-header-group;
    background-color: white;
}
.d-tbl-body {
    display: table-row-group;
}

Bước 3: Tạo Table Rows, cell, head-cell, foot-cell

HTML

<div class="d-tbl">
    <div class="d-tbl-head">
        <div class="d-tbl-row">
            <div class="d-tbl-cell d-tbl-head-cell">Header 1</div>
            <div class="d-tbl-cell d-tbl-head-cell">Header 2</div>
            <div class="d-tbl-cell d-tbl-head-cell">Header 3</div>
            <div class="d-tbl-cell d-tbl-head-cell">Header 4</div>
        </div>
    </div>
    <div class="d-tbl-body">
        <div class="d-tbl-row">
            <div class="d-tbl-cell">Column 1</div>
            <div class="d-tbl-cell">Column 2</div>
            <div class="d-tbl-cell">Column 3</div>
            <div class="d-tbl-cell">Column 4</div>
        </div>
    </div>
    <div class="d-tbl-foot">
        <div class="d-tbl-row">
            <div class="d-tbl-cell d-tbl-head-foot">Footer 1</div>
            <div class="d-tbl-cell d-tbl-head-foot">Footer 2</div>
            <div class="d-tbl-cell d-tbl-head-foot">Footer 3</div>
            <div class="d-tbl-cell d-tbl-head-foot">Footer 4</div>
        </div>
    </div>
</div>

CSS

.d-tbl-row {
    display: table-row;
}
.d-tbl-cell {
    display: table-cell;
    padding: 5px;
    border: 1px solid #dee2e6;
}
.d-tbl-head-cell,
.d-tbl-foot-cell {
    font-weight: bold;
}

Kết quả

Bước 4: thêm thanh cuộn vào bảng

HTML

<div class="p_fix_table">
    <div class="d-tbl">
        <div class="d-tbl-head" id="d-tbl-fix-head"></div>
        <div class="d-tbl-body" id="d-tbl-fix-body" onscroll="tblFixScroll('d-tbl-fix-head', 'd-tbl-fix-body')"></div>
    </div>
</div>

CSS

.p_fix_table {
    width: 100%;
    max-height: 250px;
    overflow: hidden;
}
.p_fix_table .d-tbl {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-height: 250px;
    border: 1px solid #dee2e6;
    border-collapse: collapse;
    overflow: hidden;
}
.p_fix_table .d-tbl-head {
    flex: 1 0 auto;
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-base-color: #dee2e6;
    scrollbar-face-color: #dee2e6;
    scrollbar-highlight-color: #dee2e6;
    scrollbar-track-color: #dee2e6;
    scrollbar-arrow-color: #dee2e6;
    scrollbar-shadow-color: #dee2e6;
}
.p_fix_table .d-tbl-head::-webkit-scrollbar {
    display: block;
    background-color: transparent;
}
.p_fix_table .d-tbl-head::-webkit-scrollbar-track {
    background-color: transparent;
}
.p_fix_table .d-tbl-body {
    display: block;
    overflow: scroll;
    max-height: 220px;
}
.p_fix_table .d-tbl-body:nth-child(3) {
    display: none;
}
.p_fix_table .d-tbl-cell,
.p_fix_table .d-tbl-head-cell {
    width: 170px;
    min-width: 170px;
    padding: 5px;
    border: 1px solid #dee2e6;
}
.p_fix_table .d-tbl-row .d-tbl-cell:first-child,
.p_fix_table .d-tbl-row .d-tbl-head-cell:first-child {
    position: sticky;
    left:0;
    background: white;
    z-index: 1;
}

JS

function tblFixScroll(thead_id, tbody_id) {
    let thead = document.getElementById(thead_id);
    let tbodyScroll = document.getElementById(tbody_id).scrollLeft;
    thead.scrollLeft = tbodyScroll;
    //document.getElementById("frozen").scrollLeft = 0;
}