কিভাবে একটি টেবিল প্রতিনিধিত্ব করতে 'প্রদর্শন' বৈশিষ্ট্য ব্যবহার করবেন?
নীচের টেবিলটি আপনাকে একটি ' টেবিল ' ট্যাগ এবং একই উপাদানের প্রতিনিধিত্ব করার জন্য সংশ্লিষ্ট সমর্থিত CSS সম্পত্তির মধ্যে সম্পর্ক দেয় । সুতরাং, একটি টেবিল তৈরি করার সময়, আপনাকে যা করতে হবে তা হল, HTML ' টেবিল ' ট্যাগের পরিবর্তে, শুধুমাত্র ' div ' ট্যাগ ব্যবহার করুন এবং একটি টেবিল প্রদর্শনের জন্য সংশ্লিষ্ট CSS যোগ করুন।
| <টেবিল> | {প্রদর্শন: টেবিল} |
| <tr> | {প্রদর্শন: টেবিল-সারি} |
| <thead> | {প্রদর্শন: টেবিল-হেডার-গ্রুপ} |
| <tbody> | {প্রদর্শন: টেবিল-সারি-গ্রুপ} |
| <tfoot> | {প্রদর্শন: টেবিল-ফুটার-গ্রুপ} |
| <col> | {প্রদর্শন: টেবিল-কলাম} |
| <colgroup> | {প্রদর্শন: টেবিল-কলাম-গ্রুপ} |
| <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;
}
