ٹیبل ٹیگ کے بغیر CSS کا استعمال کرتے ہوئے Div Tag سے ٹیبلز اسکرول کیسے بنائیں

ٹیبل کی نمائندگی کے لیے 'ڈسپلے' پراپرٹی کا استعمال کیسے کریں؟

نیچے دی گئی جدول آپ کو ' ٹیبل ' ٹیگ اور اسی عنصر کی نمائندگی کرنے کے لیے متعلقہ سپورٹ شدہ CSS پراپرٹی کے درمیان تعلق فراہم کرتی ہے ۔ لہذا، ایک ٹیبل بناتے وقت، آپ کو صرف HTML ' ٹیبل ' ٹیگ کے بجائے صرف ' div ' ٹیگ استعمال کرنے کی ضرورت ہے اور ٹیبل ڈسپلے کرنے کے لیے متعلقہ CSS شامل کریں۔

<ٹیبل>	{ڈسپلے:ٹیبل}
<tr>	{ڈسپلے: ٹیبل قطار}
<thead>	{ڈسپلے: ٹیبل ہیڈر گروپ}
<tbody>	{ڈسپلے: ٹیبل قطار گروپ}
<tfoot>	{ڈسپلے: ٹیبل فوٹر گروپ}
<col>	{ڈسپلے: ٹیبل کالم}
<colgroup>	{ڈسپلے: ٹیبل کالم گروپ}
<td>، <th>	{ڈسپلے: ٹیبل سیل}
<caption>	{display: table-caption}

مرحلہ 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;  
}