সামগ্রীতে কোষের প্রস্থ ফিট করুন

Question

নিম্নলিখিত মার্কআপটি দেওয়া, আমি কীভাবে একটি ঘর (কলামের সমস্ত ঘর) প্রসারিতের চেয়ে প্রস্থের (যা ডিফল্ট আচরণ) এর চেয়ে প্রস্থের সাথে মানিয়ে নিতে বাধ্য করতে সিএসএস ব্যবহার করতে পারি?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

সম্পাদনা করুন: আমি বুঝতে পারি যে আমি প্রস্থটিকে কঠোরভাবে কোড করতে পেরেছি, তবে সেই কলামটিতে যে বিষয়বস্তুটি থাকবে তা গতিশীল বলে আমি বরং এটি করব না।

নীচের চিত্রটির দিকে তাকালে, প্রথম চিত্রটি হ'ল মার্কআপটি কী উত্পন্ন করে। দ্বিতীয় চিত্রটি আমি যা চাই তা চাই।

Comments

আমি আপনার প্রশ্ন বুঝতে পারি না। আপনি কি শেষ কলামটিকে নির্দিষ্ট প্রস্থ হিসাবে সীমাবদ্ধ করতে চান?

— মেটালফ্রোগ

@diEcho আমার মনে হয়েছিল এটি মোটামুটি পরিষ্কার was আমি একটি বা দুটি ছবি যুক্ত করব।

— ম্যানসফিল্ড

সম্ভাব্য সদৃশ সিএসএস সারণি কলামে স্বয়ংক্রিয়-প্রস্থ

— Vadzim

Answer 1

আমি আপনার প্রশ্নটি বুঝতে পেরেছি কিনা তা নিশ্চিত নই, তবে আমি এটিতে ছুরিকাঘাত করব। উদাহরণের জেএসফিডেল ।

এইচটিএমএল:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

সিএসএস:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

Comments

আপনি তার <table style="width:100%">পরিবর্তে কেন <table width="100%" >

— লিখছেন

@diEcho আমি সেই অংশটি লিখিনি, এটি উদাহরণ কোড থেকে। নির্বিশেষে, উপাদানগুলিতে প্রস্থের বৈশিষ্ট্যটি ব্যবহার করা খারাপ অভ্যাস। এই দ্রুত উদাহরণে, ইনলাইন সিএসএস ঠিক আছে, তবে এটি কোনও ফাইলের মধ্যে বিমূর্ত হওয়া উচিত যদি এটি উত্পাদন-স্তরের কোড ছিল।

— মেটালফ্রগ

এই আইএমও করার একটি পরিষ্কার উপায় হ'ল "নস্ট্রেচ" (বা এর মতো কিছু) নামক একটি শৈলীর সংজ্ঞা দেওয়া এবং তারপরে সিএসএসে নস্ট্রেচ সংজ্ঞায়িত করা হবে: প্রস্থ: 1% এবং নওর্যাপ। তারপরে শেষ টিডিতে 'শ্রেণি = "নস্ট্রেচ ব্লক" থাকবে। এইভাবে আপনি যে কোনও ঘর "নস্ট্রেচ" করতে পারেন।

— টিম হল্ট

এটি একটি ভাল সমাধান, তবে দুঃখের বিষয়, বুটস্ট্র্যাপ 3-এ আমার বোতামের গোষ্ঠীগুলি এগুলি থেকে মুড়ে যাবে : jsfiddle.net/wexdX/326 কোনও ধারণা কীভাবে আমি এটিকে দমন করতে পারি?

— মার্টিন ব্রাউন

এটি কেবল তখনই কাজ করে যখন বিষয়বস্তু আরও প্রশস্ত হবে: প্রস্থ: 1% - ঠিক? কারণ বিষয়বস্তু যদি ছোট হয় তবে প্রস্থ: 1%, ঘরটি আরও বড় হবে।

— আদম

Answer 2

বিন্যাস

max-width:100%;
white-space:nowrap;

আপনার সমস্যা সমাধান করবে।

Answer 3

আমার জন্য, এটি টেবিল এবং এর কলামগুলির জন্য সেরা অটোফিট এবং অটোরেসাইজ (সিএসএস ব্যবহার করুন! গুরুত্বপূর্ণ ... আপনি যদি না পারেন তবেই)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

টেবিলের জন্য বা টেবিল কলামগুলির জন্য CSS প্রস্থ উল্লেখ করবেন না। টেবিলের বিষয়বস্তু বড় হলে এটি স্ক্রিনের আকারের ওপরে যাবে।

Answer 4

সিএসএসের প্রস্থকে 1% বা একটি উপাদানের 100% এ সেট করা যা আমি জানতে পারি যে সমস্ত চশমাটি পিতামাতার সাথে সম্পর্কিত। যদিও লেখার মুহুর্তে ব্লিঙ্ক রেন্ডারিং ইঞ্জিন (ক্রোম) এবং গেকো (ফায়ারফক্স) মনে হয় যে এটি 1% বা 100% (উপলব্ধ স্থান পূরণ করতে একটি কলাম সঙ্কুচিত করুন বা একটি কলাম তৈরি করুন) ভালভাবে পরিচালনা করে তবে সমস্ত সিএসএস স্পেসিফিকেশন অনুসারে এটি গ্যারান্টিযুক্ত নয় আমি এটি সঠিকভাবে রেন্ডার করতে পারেন।

একটি বিকল্প হ'ল CSS4 ফ্লেক্স ডিভিড সহ টেবিলটি প্রতিস্থাপন:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

এটি নতুন ব্রাউজারগুলিতে কাজ করে অর্থাৎ IE11 + নিবন্ধের নীচে টেবিলটি দেখুন।

Answer 5

এটি করার অনেক উপায় আছে!

আমি ভুল হলে আমাকে সংশোধন করুন তবে প্রশ্ন এই ধরণের ফলাফল খুঁজছে।

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

প্রথম 2 ক্ষেত্রগুলি বাকী পৃষ্ঠাটি "ভাগ করে নেবে" (দ্রষ্টব্য: আপনি যদি 50% ক্ষেত্রের মধ্যে আরও পাঠ্য যোগ করেন তবে এটি আরও বেশি স্থান গ্রহণ করবে), এবং শেষ ক্ষেত্রটি নিয়মিতভাবে টেবিলকে আধিপত্য করবে।

আপনি যদি পাঠ্যের মোড়কে দিতে খুশি হন তবে আপনি সাদা স্থান স্থানান্তর করতে পারবেন : এখনই; 3 য় ক্ষেত্রের শৈলীতে সেই ক্ষেত্রে
নতুন লাইন শুরু করার একমাত্র উপায় হবে।

বিকল্প হিসাবে, আপনি শেষ ক্ষেত্রের উপর একটি দৈর্ঘ্য সেট করতে পারেন। প্রস্থ: 150px, এবং প্রথম 2 ক্ষেত্রের শতাংশের ছেড়ে দিন।

আশাকরি এটা সাহায্য করবে!

Answer 6

সাধারণ:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>