টুইটার বুটস্ট্র্যাপের টেবিলগুলির সর্বদা 100% প্রস্থ থাকে কেন?

Question

ধরুন এই মার্কআপ:

<table class="table table-bordered" align="center"> 

আমার কতগুলি ঘর আছে তা কোনও ম্যাথার নেই, টেবিলটি সর্বদা 100% প্রস্থে থাকে। এটা কেন?

Comments

কারণ এটি দক্ষতার সাথে তার পিতামাতার প্রস্থকে ব্যবহার করে; গ্রিড সিস্টেম কিভাবে কাজ করা উচিত!

— বিশাল

আপনি আপনার টেবিলটি কত প্রস্থ হতে চান?

— আন্দ্রেস ইলিচ

আমি চাইছি এটি সাধারণ টেবিলের মতোই কোষের সংখ্যার উপর ডিপেন্ড করা হোক

— স্কোরোন-লাইনে

যারা স্প্যানের মাধ্যমে

— ডিভ

Answer 1

বুটস্ট্র্যাপের মধ্যে থাকা সমস্ত টেবিলগুলি তাদের ধারক অনুসারে প্রসারিত হয়, যা আপনি নিজের টেবিলটিকে .span*আপনার পছন্দের গ্রিড উপাদানের ভিতরে রেখে সহজেই করতে পারেন । আপনি যদি এই সম্পত্তিটি মুছে ফেলতে চান তবে আপনি নিজের টেবিল শ্রেণি তৈরি করতে পারেন এবং কেবলমাত্র সেই টেবিলটিতে এটি যোগ করতে পারেন যা আপনি এর মধ্যে থাকা সামগ্রীর সাথে প্রসারিত করতে চান:

.table-nonfluid {
   width: auto !important;
}

আপনি নিজের স্টাইলশীটের ভিতরে এই শ্রেণিটি যুক্ত করতে পারেন এবং কেবল আপনার টেবিলের পাত্রে এটি যুক্ত করতে পারেন:

<table class="table table-nonfluid"> ... </table>

এইভাবে আপনার পরিবর্তনটি বুটস্ট্র্যাপ স্টাইলশীটকে নিজেই প্রভাব ফেলবে না (আপনি নিজের দস্তাবেজের অন্য কোনও জায়গায় তরল টেবিল রাখতে চাইতে পারেন)।

Comments

আপনি যদি টেবিলটি একটি স্প্যান * ট্যাগের ভিতরে রাখেন, টেবিলটি কেন্দ্র করার জন্য, আপনি কি কেবল একটি অফসেট * অন্তর্ভুক্ত করবেন?

— এইচপিডাব্লুডি

@ ডেলাকি হ্যাঁ, আপনি কেন্দ্রীভূত করার জন্য টেবিলটি একটি শ্রেণীর সাথে অফসেট করতে পারেন, এমনকি আপনি কিছু টুকরো দিতে আপনার টেবিলের সাথে একটি শ্রেণি যুক্ত করতে পারেন .span*।

— আন্দ্রেস ইলিচ

কমপক্ষে বুটস্ট্র্যাপ 3 দিয়ে এটি কেবলমাত্র !importantwidth: auto

— geekQ

আমাদের একটি টেবিলের জন্য বুটস্টারের স্প্যান ক্লাস ব্যবহার করতে হবে, অথবা আমাদের স্প্যানিশ .span ক্লাসের জন্য একটি স্টাইল দিতে হবে,

— ধালিওয়াল

সতর্কবাণী। টেবিল-প্রতিক্রিয়াশীল এবং। টেবিল-সীমান্তযুক্ত সংমিশ্রণে ব্যবহার করা হয় তবে সাবধান হন। পর্দার প্রস্থ 767px এর নীচে থাকলে সীমান্তটি .table- প্রতিক্রিয়াশীল ধারকটিতে প্রয়োগ করা হয়। (বুটস্ট্র্যাপ 3.x)

— স্টুয়ার্ট

Answer 2

<table style="width: auto;" ...ঠিকভাবে কাজ করে. Chrome 38, IE 11 এবং ফায়ারফক্স 34 এ পরীক্ষিত।

জেএসফিডাল: http://jsfiddle.net/rpaul/taqodr8o/

Answer 3

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করেন তবে ব্যবহার করুন .w-auto।

Https://getbootstrap.com/docs/4.1/utilities/sizing/ দেখুন

Answer 4

উত্তর 1:

কেন এটা লড়াই? বুটস্ট্র্যাপ গ্রিড ব্যবহার করে কেবল আপনার টেবিলের প্রস্থকে নিয়ন্ত্রণ করবেন না কেন? এটি বুটস্ট্র্যাপ 3 মার্কআপ।

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

এটি এমন একটি সারণী তৈরি করবে যা ধারণকারী উপাদানটির প্রস্থের অর্ধেক (12 এর মধ্যে 6)।

আমি অন্যান্য উত্তরগুলির সাথে মাঝে মাঝে ইনলাইন স্টাইল ব্যবহার করি তবে এটি নিরুৎসাহিত করা হয়।

উত্তর # 2:

আপনি যদি বুটস্ট্র্যাপ 4 ব্যবহার করে থাকেন তবে এর প্রস্থের মতো কিছু ভাল সহায়ক ক্লাস রয়েছে:

w-25, w-50, w-75, and w-100

এখানে ডকটি রয়েছে: https://getbootstrap.com/docs/4.0/utilities/sizing/

Comments

এটি এখন পর্যন্ত সবচেয়ে সহজ সমাধান এবং এটি গ্রহণযোগ্য উত্তর হওয়া উচিত

— জেফ ব্রাউন

Answer 5

আমার একই সমস্যা ছিল, আমি টেবিলটি স্থির করে দিয়েছি এবং তারপরে আমার টিডি প্রস্থ উল্লেখ করেছি। আপনার যদি থাকে তবে আপনি সেগুলিও করতে পারেন।

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

টেবিল-ননফ্লুয়েডের সাথে আমার ভাগ্য হয়নি।

Comments

চেষ্টা করুনwidth: auto !important;

— লিও

আপনি এড়াতে পারেন !important(এটি একটি খারাপ অভ্যাস )। নীচে একটি উত্তর মন্তব্য দেখুন ।

— অলি বেনেট

Answer 6

আমি যুক্ত করার চেষ্টা করেছি style="width: auto !important"এবং আমার জন্য দুর্দান্ত কাজ করে!

Comments

আপনি যদি নিশ্চিত হন যে আপনার কাস্টম সিএসএস বুটস্ট্র্যাপ সিএসএসের পরে উপস্থিত হয় (যেমন আপনার কাস্টম শৈলীর <link>ট্যাগটি বুটস্ট্র্যাপ ট্যাগের নীচে উপস্থিত হয় <link>), তবে নিয়মগুলি নকশা অনুসারে ক্যাসকেড করবে এবং আপনার !importantব্যতিক্রমটি ব্যবহার করার দরকার নেই । এটি সত্য কারণ বুটস্ট্র্যাপ সিএসএসেwidth: 100%; সংজ্ঞায়িত করা হয়েছে tableএবং এটি আপনার নিয়মকে ছাড়িয়ে যাচ্ছে । width: auto;

— অলি

আসলে কোনও উত্তর নয়, বর্তমান গৃহীত উত্তরের সম্পাদনা করা ভাল যা বেশিরভাগ লোকেরা পড়ে (আমি এটি এখন সম্পাদনা করেছি) ।

— আইলিয়ান ওনোফ্রেই