टेबल टैग के बिना सीएसएस का उपयोग करके डिव टैग से टेबल स्क्रॉल कैसे बनाएं

किसी तालिका का प्रतिनिधित्व करने के लिए 'डिस्प्ले' संपत्ति का उपयोग कैसे करें?

नीचे दी गई तालिका आपको उसी तत्व का प्रतिनिधित्व करने के लिए ' तालिका ' टैग और संबंधित समर्थित सीएसएस संपत्ति के बीच संबंध देती है । इसलिए, तालिका बनाते समय, आपको बस HTML ' टेबल ' टैग के बजाय, ' div ' टैग का उपयोग करना होगा और तालिका प्रदर्शित करने के लिए संबंधित सीएसएस जोड़ना होगा।

<तालिका>	{प्रदर्शन: तालिका}
<tr>	{प्रदर्शन: तालिका-पंक्ति}
<सिर>	{प्रदर्शन: टेबल-हेडर-समूह}
<tbody>	{प्रदर्शन: तालिका-पंक्ति-समूह}
<tfoot>	{प्रदर्शन: टेबल-फ़ुटर-समूह}
<col>	{प्रदर्शन: तालिका-स्तंभ}
<कोलग्रुप>	{प्रदर्शन: तालिका-स्तंभ-समूह}
<td>, <th>	{प्रदर्शन: टेबल-सेल}
<कैप्शन>	{प्रदर्शन: तालिका-कैप्शन}

चरण 1: तालिका के लिए मास्टर डिव बनाएं

एचटीएमएल

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

सीएसएस

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

चरण 3: एक टेबल कैप्शन, हेडर, बॉडी, फ़ुटर बनाएं

एचटीएमएल

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

सीएसएस

.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: टेबल पंक्तियाँ, सेल, हेड-सेल, फ़ुट-सेल बनाएँ

एचटीएमएल

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

सीएसएस

.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: तालिका में स्क्रॉल बार जोड़ें

एचटीएमएल

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

सीएसएस

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