ਟੇਬਲ ਟੈਗ ਤੋਂ ਬਿਨਾਂ CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਡਿਵ ਟੈਗ ਤੋਂ ਟੇਬਲ ਸਕ੍ਰੌਲ ਕਿਵੇਂ ਕਰੀਏ

ਇੱਕ ਸਾਰਣੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ 'ਡਿਸਪਲੇ' ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ?

ਹੇਠਾਂ ਦਿੱਤੀ ਸਾਰਣੀ ਤੁਹਾਨੂੰ ਉਸੇ ਤੱਤ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ' ਟੇਬਲ ' ਟੈਗ ਅਤੇ ਸੰਬੰਧਿਤ ਸਮਰਥਿਤ CSS ਪ੍ਰਾਪਰਟੀ ਵਿਚਕਾਰ ਸਬੰਧ ਦਿੰਦੀ ਹੈ । ਇਸ ਲਈ, ਜਦੋਂ ਇੱਕ ਸਾਰਣੀ ਬਣਾਉਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਸਿਰਫ਼ HTML ' ਟੇਬਲ ' ਟੈਗ ਦੀ ਬਜਾਏ, ਸਿਰਫ਼ ' div ' ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਇੱਕ ਸਾਰਣੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਬੰਧਿਤ CSS ਜੋੜੋ।

<ਟੇਬਲ>	{ਡਿਸਪਲੇ: ਟੇਬਲ}
<tr>	{ਪ੍ਰਦਰਸ਼ਨ: ਸਾਰਣੀ-ਕਤਾਰ}
<thead>	{ਡਿਸਪਲੇ: ਟੇਬਲ-ਸਿਰਲੇਖ-ਸਮੂਹ}
<tbody>	{ਪ੍ਰਦਰਸ਼ਨ: ਸਾਰਣੀ-ਕਤਾਰ-ਸਮੂਹ}
<tfoot>	{ਡਿਸਪਲੇ: ਟੇਬਲ-ਫੂਟਰ-ਗਰੁੱਪ}
<col>	{ਪ੍ਰਦਰਸ਼ਨ: ਸਾਰਣੀ-ਕਾਲਮ}
<colgroup>	{ਡਿਸਪਲੇ: ਟੇਬਲ-ਕਾਲਮ-ਗਰੁੱਪ}
<td>, <th>	{ਡਿਸਪਲੇ: ਟੇਬਲ-ਸੈੱਲ}
<ਕੈਪਸ਼ਨ>	{ਡਿਸਪਲੇ: ਟੇਬਲ-ਕੈਪਸ਼ਨ}

ਕਦਮ 1: ਟੇਬਲ ਲਈ ਮਾਸਟਰ ਡਿਵ ਬਣਾਓ

HTML

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

CSS

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

ਕਦਮ 3: ਇੱਕ ਸਾਰਣੀ ਸਿਰਲੇਖ, ਸਿਰਲੇਖ, ਬਾਡੀ, ਫੁੱਟਰ ਬਣਾਓ

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;  
}

ਸਟੈਪ3: ਟੇਬਲ ਕਤਾਰਾਂ, ਸੈੱਲ, ਹੈੱਡ-ਸੈੱਲ, ਫੁੱਟ-ਸੈੱਲ ਬਣਾਓ

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;  
}

ਨਤੀਜਾ

ਕਦਮ 4: ਟੇਬਲ ਵਿੱਚ ਸਕ੍ਰੋਲ ਬਾਰ ਸ਼ਾਮਲ ਕਰੋ

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;  
}

ਜੇ.ਐਸ

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;  
}