যখন কোনও টেবিলের প্রস্থটি স্প্যানের প্রস্থের চেয়ে বেশি হয়, তবে এই পৃষ্ঠার মতো: http://jsfiddle.net/rcHdC/
আপনি দেখতে পাবেন যে টেবিলের সামগ্রীটি এর বাইরে রয়েছে span।
এই মামলাটি পূরণের সর্বোত্তম পদ্ধতি কী হবে?
যখন কোনও টেবিলের প্রস্থটি স্প্যানের প্রস্থের চেয়ে বেশি হয়, তবে এই পৃষ্ঠার মতো: http://jsfiddle.net/rcHdC/
আপনি দেখতে পাবেন যে টেবিলের সামগ্রীটি এর বাইরে রয়েছে span।
এই মামলাটি পূরণের সর্বোত্তম পদ্ধতি কী হবে?
উত্তর:
বুটস্ট্র্যাপ 3 এর এখন বাক্সের বাইরে প্রতিক্রিয়াশীল টেবিল রয়েছে। হুররে! :)
আপনি এটি এখানে চেক করতে পারেন: https://getbootstrap.com/docs/3.3/css/#tables- প্রতিক্রিয়াশীল
<div class="table-responsive">আপনার টেবিলের চারপাশে একটি জুড়ুন এবং আপনার যাওয়া ভাল হবে:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
এটি সমস্ত লেআউটে কাজ করার জন্য আপনি এটি করতে পারেন:
.table-responsive
{
overflow-x: auto;
}
overflow-x: autoএকটি কাস্টম মধ্যে CSSফাইল বৃহত্তর প্রদর্শন বিন্যাস জন্য কৌতুক আছে।
border: 1px solid #dddddd;
.table-responsive td, .table-responsive th { white-space:nowrap; }কক্ষগুলি স্বয়ংক্রিয়ভাবে সঙ্কুচিত না হয় এবং লাইন ব্রেকগুলি যুক্ত না করে তা নিশ্চিত করতে যুক্ত করতেও পারে ।
একটি বিকল্প যা পাওয়া যায় তা হ'ল ফুটেবল। একটি প্রতিক্রিয়াশীল ওয়েবসাইটে দুর্দান্ত কাজ করে এবং আপনাকে একাধিক ব্রেকপয়েন্টগুলি সেট করার অনুমতি দেয় ... fooTable লিঙ্ক
প্রতিক্রিয়াশীল টেবিলগুলি ব্যবহার করার সময় আপনি করতে পারেন এমন অনেকগুলি পৃথক জিনিস রয়েছে।
আমি ব্যক্তিগতভাবে ক্রিস কোয়েরের এই পদ্ধতির পছন্দ করি:
আপনি এখানে আরও অনেক বিকল্প খুঁজে পেতে পারেন:
আপনি যদি বুটস্ট্র্যাপটি উত্তোলন করতে এবং দ্রুত কিছু পেতে পারেন তবে কিছু সারি লুকিয়ে রাখতে আপনি কেবল ".hided-phone" এবং ".hided-ট্যাবলেট" শ্রেণীর নামগুলি ব্যবহার করতে পারেন তবে অনেক ক্ষেত্রে এই পদ্ধতিটি সেরা হতে পারে। আরও তথ্য ("প্রতিক্রিয়াশীল ইউটিলিটি ক্লাস" দেখুন):
আপনি যদি বুটস্ট্র্যাপ 3 এবং কম ব্যবহার করেন তবে ফাইল আপডেট করে সমস্ত রেজোলিউশনে প্রতিক্রিয়াশীল টেবিল প্রয়োগ করতে পারেন:
tables.less
বা এই অংশটি ওভাররাইট করা:
@media (max-width: @screen-xs) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid @table-border-color;
// Tighten up spacing and give a background color
> .table {
margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
white-space: nowrap;
}
}
}
}
// Special overrides for the bordered tables
> .table-bordered {
border: 0;
// Nuke the appropriate borders so that the parent can handle them
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
}
> tr:last-child {
> th,
> td {
border-bottom: 0;
}
}
}
}
}
}
সঙ্গে:
@media (max-width: @screen-lg) {
.table-responsive {
width: 100%;
...
আমি কীভাবে প্রথম পর্দা @ স্ক্রিন-XX মান পরিবর্তন করেছি তা নোট করুন।
আমি জানি যে সমস্ত টেবিলকে জবাবদিহি করা ভাল না লাগতে পারে তবে এটি বড় টেবিলগুলিতে (প্রচুর কলামে) এলজি পর্যন্ত সক্ষম হওয়া আমার পক্ষে অত্যন্ত দরকারী।
আশা করি এটি কাউকে সাহায্য করবে।