<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td{max-width:67%;}
</style>
উপরের কাজ করে না। শতাংশ ব্যবহার করে আমি কীভাবে কোনও টেবিল ঘরের সর্বোচ্চ-প্রস্থ সেট করতে পারি?
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td{max-width:67%;}
</style>
উপরের কাজ করে না। শতাংশ ব্যবহার করে আমি কীভাবে কোনও টেবিল ঘরের সর্বোচ্চ-প্রস্থ সেট করতে পারি?
উত্তর:
সিএসএস ২.১ স্পেসে সর্বাধিক প্রস্থের সংজ্ঞা অনুসারে , "টেবিল, ইনলাইন টেবিল, টেবিল সেল, টেবিল কলাম এবং কলামের গোষ্ঠীতে 'ন্যূনতম প্রস্থ' এবং 'সর্বাধিক প্রস্থের' প্রভাব নির্ধারিত। সুতরাং আপনি সরাসরি একটি টিডি উপাদানের উপর সর্বোচ্চ-প্রস্থ সেট করতে পারবেন না।
যদি আপনি কেবল দ্বিতীয় কলামটি সর্বাধিক 67% অবধি গ্রহণ করতে চান তবে আপনি প্রস্থটি (যা ন্যূনতম প্রস্থে সারণী কোষগুলির জন্য কার্যকর হয়) 33% তে সেট করতে পারেন, উদাহরণস্বরূপ উদাহরণস্বরূপ
td:first-child { width: 33% ;}
উভয় কলামের জন্য এটি নির্ধারণ করা ভাল কাজ করবে না, কারণ এটি ব্রাউজারগুলি কলামগুলিকে সমান প্রস্থ দেয়।
পুরানো প্রশ্ন আমি জানি, তবে এটি এখন table-layout: fixed
টেবিল ট্যাগে CSS সম্পত্তি ব্যবহার করে সম্ভব । এই প্রশ্নের উত্তর নীচে সিএসএস শতাংশের প্রস্থ এবং একটি টেবিল ঘরে পাঠ্য-ওভারফ্লো
এটি সহজেই ব্যবহার করে করা হয় table-layout: fixed
তবে কিছুটা জটিল কারণ এই সিএসএস সম্পত্তি সম্পর্কে অনেকেই জানেন না।
table {
width: 100%;
table-layout: fixed;
}
এটি এখানে আপডেট হওয়া ফ্রিডলে কর্মে দেখুন: http://jsfiddle.net/Fm5bM/4/
max-width
সেই jsfiddle এ সরিয়ে থাকেন তবে প্রস্থটি একই থাকবে তাই এটি max-width
সেট করে না। আপনি যদি max-width: 10%
প্রথমটির সাথে এটি প্রতিস্থাপন করেন তবে এটি আরও পরিষ্কার হতে পারে td
... আপনি দেখতে পাবেন যে এটি পরিবর্তন হয় না। jsfiddle.net/w3f8ey22/1
আমি জানি এটি আক্ষরিক এক বছর পরে, তবে আমি অনুভব করেছি যে আমি ভাগ করে নেব। আমি একই জিনিসটি করার চেষ্টা করছিলাম এবং আমার জন্য কাজ করা এই সমাধানটি পেলাম। আমরা পুরো টেবিলের জন্য সর্বাধিক প্রস্থ নির্ধারণ করেছি, তারপরে কাঙ্ক্ষিত প্রভাবের জন্য কক্ষের আকারগুলির সাথে কাজ করেছি।
টেবিলটিকে তার নিজস্ব ডিভিতে রাখুন, তারপরে পুরো টেবিলের জন্য পছন্দসই হিসাবে প্রস্থ, ন্যূনতম প্রস্থ এবং / অথবা ডিভের সর্বোচ্চ-প্রস্থ নির্ধারণ করুন। তারপরে, আপনি কাজ করতে পারেন এবং অন্যান্য কক্ষের জন্য প্রস্থ এবং ন্যূনতম প্রস্থকে সেট করতে পারেন এবং ডিভের জন্য সর্বাধিক প্রস্থটি কার্যকরভাবে আমরা চেয়েছি সর্বাধিক প্রস্থ অর্জনের জন্য চারপাশে এবং পিছনের দিকে কাজ করে।
<div id="tablediv">
<table width="100%">
<tr>
<td class="tdleft">Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
</div>
তারপরে আপনার স্টাইলগুলিতে রাখুন:
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}
স্বীকার করা যায়, এটি আপনাকে প্রতি সেউসের একটি "সর্বোচ্চ" প্রস্থ দেয় না, তবে এটি এমন কিছু নিয়ন্ত্রণের অনুমতি দেয় যা এই জাতীয় বিকল্পের পরিবর্তে কাজ করতে পারে। এটি আপনার প্রয়োজনের জন্য কাজ করবে কিনা তা নিশ্চিত নয়। আমি জানি যে এটি আমাদের পরিস্থিতির জন্য কাজ করেছে যেখানে আমরা পৃষ্ঠায় নেভিগেশন দিকটি একটি বিন্দুতে স্কেল করতে এবং এই মুহুর্তে সমস্ত প্রশস্ত পর্দার জন্য চাই।