html - w3schools - কন্টেন্ট ফিট কোষ প্রস্থ




w3schools css (3)

আমার জন্য, এটি সর্বোত্তম অটোফিট এবং টেবিল এবং এর কলামগুলির জন্য স্বতঃস্ফূর্ত (CSS ব্যবহার করুন! গুরুত্বপূর্ণ ... শুধুমাত্র যদি আপনি ছাড়া নাও পারেন)

.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 প্রস্থ নির্দিষ্ট করবেন না। টেবিল কন্টেন্ট বড় হলে এটি পর্দা আকারের উপর যেতে হবে।

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

<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>

সম্পাদন করুন: আমি বুঝি যে আমি প্রস্থকে কঠিন কোড করতে পারি, কিন্তু আমি তা করতে চাই না, যে কলামে যা যাবেন তা গতিশীল।

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


আমি যদি আপনার প্রশ্ন বুঝতে পারি তবে আমি নিশ্চিত নই, তবে আমি এটিতে একটি স্ট্যাব নেব। উদাহরণস্বরূপ JSfiddle

এইচটিএমএল:

<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;
}

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

সিএসএস 4 ফ্লেক্স divs সঙ্গে টেবিল প্রতিস্থাপন করা হয় এক বিকল্প:

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

যে নতুন ব্রাউজারে কাজ করে IE11 + নিবন্ধটি নীচে টেবিল দেখুন।







html-table