<tbody>উপাদানটিকে স্ক্রোলযোগ্য করার জন্য , পৃষ্ঠাতে এটি ব্যবহার করার পদ্ধতি যেমন ব্যবহার করে আমাদের পরিবর্তন করতে হবেdisplay: block; এটি একটি ব্লক স্তর উপাদান হিসাবে প্রদর্শন করতে ।
যেহেতু আমরা এর displayসম্পত্তি পরিবর্তন করি tbody, আমাদের সেই সম্পত্তিটির জন্য পরিবর্তন করা উচিতthead উপাদান হিসাবে পাশাপাশি টেবিলের বিন্যাসটি ভাঙ্গতে রোধ করা উচিত।
তাহলে আমাদের আছে:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
ওয়েব ব্রাউজারগুলি সারি-গ্রুপ হিসাবে theadএবং tbodyউপাদানগুলি প্রদর্শন করে ( এবংtable-header-grouptable-row-group ডিফল্টরূপে ) ।
একবার আমরা এটি পরিবর্তন করি, ভিতরে tr উপাদানগুলি তাদের ধারকটির পুরো স্থানটি পূরণ করে না।
এটি ঠিক করতে, আমাদের tbodyকলামগুলির প্রস্থ গণনা করতে হবে এবং সংশ্লিষ্ট মানটি প্রয়োগ করতে হবেthead জাভাস্ক্রিপ্টের মাধ্যমে কলামগুলির ।
অটো প্রস্থ কলাম
এখানে উপরের যুক্তির jQuery সংস্করণটি রয়েছে:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
এবং এখানে আউটপুট (উইন্ডোজ 7 ক্রোম 32 এ) রয়েছে :
কাজ ডেমো ।
পূর্ণ প্রস্থ সারণী, আপেক্ষিক প্রস্থ কলাম
অরিজিনাল পোস্টারের প্রয়োজন অনুসারে, আমরা এর ধারকটির table100% পর্যন্ত প্রসারিত করতে পারি widthএবং তারপরে সারণীর প্রতিটি কলামের জন্য একটি আপেক্ষিক ( শতাংশ ) widthব্যবহার করতে পারি।
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
যেহেতু টেবিলটির একটি (সাজানোর) তরল বিন্যাস রয়েছে , theadতাই ধারকটির আকার পরিবর্তন হয়ে গেলে আমাদের কলামগুলির প্রস্থ সামঞ্জস্য করা উচিত ।
উইন্ডোটি পুনরায় আকার দেওয়ার পরে আমাদের কলামগুলির প্রস্থগুলি সেট করা উচিত:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
আউটপুটটি হবে:
কাজ ডেমো ।
ব্রাউজার সমর্থন এবং বিকল্প
আমি উইন্ডোজ 7 এ বড় ওয়েব ব্রাউজারগুলির নতুন সংস্করণগুলি (IE10 + সহ) এর মাধ্যমে দুটি পরীক্ষা করেছি এবং এটি কার্যকর হয়েছে।
তবে এটি আই 9 এবং নীচে সঠিকভাবে কাজ করে না ।
এটি কারণ একটি টেবিল বিন্যাসে , সমস্ত উপাদান একই কাঠামোগত বৈশিষ্ট্য অনুসরণ করা উচিত।
এবং display: block;জন্য ব্যবহার করে<thead><tbody> উপাদানগুলির আমরা টেবিলের কাঠামোটি ভেঙে ফেলেছি।
জাভাস্ক্রিপ্ট মাধ্যমে লেআউট পুনরায় নকশা
একটি পদ্ধতি হ'ল (সম্পূর্ণ) সারণী বিন্যাসটি পুনরায় নকশা করা। ফ্লাই এবং হ্যান্ডেলটিতে নতুন লেআউট তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করে এবং / অথবা ঘরের প্রস্থ / উচ্চতা গতিশীলভাবে সামঞ্জস্য করতে।
উদাহরণস্বরূপ, নিম্নলিখিত উদাহরণগুলি একবার দেখুন:
নীড় টেবিল
এই পদ্ধতির সাথে দুটি ডিভযুক্ত টেবিল রয়েছে যাতে একটি ডিভ থাকে। প্রথমটির tableএকটি মাত্র সেল রয়েছে যার একটি রয়েছে divএবং দ্বিতীয় টেবিলটি সেই divউপাদানটির ভিতরে রাখা হয়েছে ।
পরীক্ষা করে দেখুন উল্লম্ব স্ক্রোল টেবিল এ সিএসএস প্লে ।
এটি বেশিরভাগ ওয়েব ব্রাউজারে কাজ করে। আমরা জাভাস্ক্রিপ্টের মাধ্যমে উপরের যুক্তিটিকে গতিশীলভাবে করতে পারি।
স্ক্রোলে স্থির শিরোনাম সহ টেবিল
যেহেতু করতে উল্লম্ব স্ক্রোল দন্ড যোগ করার উদ্দেশ্যে <tbody>টেবিল প্রদর্শন করার করা হয় হেডার প্রতিটি সারির উপরের, আমরা পারে অবস্থানthead থাকার উপাদানfixed পরিবর্তে স্ক্রীনের উপরের অংশে।
জুলিয়েন দ্বারা সম্পাদিত এই পদ্ধতির একটি ওয়ার্কিং ডেমো এখানে রয়েছে ।
এটিতে একটি আশাব্যঞ্জক ওয়েব ব্রাউজার সমর্থন রয়েছে।
আর এখানে একটি বিশুদ্ধ সিএসএস দ্বারা বাস্তবায়ন উইলেম ভ্যান Bockstal ।
খাঁটি সিএসএস সলিউশন
এখানে পুরানো উত্তর। অবশ্যই আমি একটি নতুন পদ্ধতি যুক্ত করেছি এবং সিএসএসের ঘোষণাগুলি পরিমার্জন করেছি।
স্থির প্রস্থ সঙ্গে সারণী
এই ক্ষেত্রে, এর tableএকটি স্থির হওয়া উচিত width (কলামগুলির প্রশস্ততা এবং উল্লম্ব স্ক্রোল-বারের প্রস্থ সহ) ।
প্রতিটি কলামের একটি নির্দিষ্ট থাকা উচিত প্রস্থ এবং শেষ কলামটি এর theadউপাদান অধিক প্রয়োজন প্রস্থ যা অন্যদের 'থেকে সমান প্রস্থ + + প্রস্থ উল্লম্ব স্ক্রোল-বারের।
সুতরাং, সিএসএস হতে হবে:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
এখানে ফলাফল:
কাজ ডেমো ।
100% প্রস্থ সহ সারণী
এই পদ্ধতির সালে tableএকটি প্রস্থ হয়েছে 100%এবং প্রতিটি জন্য thএবং td, এর মান widthসম্পত্তি চেয়ে কম হওয়া উচিত 100% / number of cols।
এছাড়াও, আমরা কমাতে প্রয়োজন প্রস্থ এর theadমান হিসাবে প্রস্থ উল্লম্ব স্ক্রোল-বারের।
এটি করার জন্য, আমাদের সিএসএস 3 calc()ফাংশনটি ব্যবহার করা দরকার , যা নিম্নলিখিত:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
এখানে অনলাইন ডেমো রয়েছে ।
দ্রষ্টব্য: প্রতিটি কলামের সামগ্রীর লাইনটি ভাঙলে এই পদ্ধতির ব্যর্থতা হবে , অর্থাত প্রতিটি কক্ষের বিষয়বস্তু পর্যাপ্ত পরিমাণে কম হওয়া উচিত ।
নিম্নলিখিতটিতে, খাঁটি সিএসএস সমাধানের দুটি সহজ উদাহরণ রয়েছে যা আমি এই প্রশ্নের উত্তর দেওয়ার সময় তৈরি করেছি।
এখানে jsFiddle ডেমো ভি 2 ।
পুরানো সংস্করণ: jsFiddle ডেমো ভি 1
