শতাংশ ব্যবহার করে আমি কীভাবে কোনও টেবিল ঘরের সর্বোচ্চ-প্রস্থ সেট করতে পারি?


104
<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

উপরের কাজ করে না। শতাংশ ব্যবহার করে আমি কীভাবে কোনও টেবিল ঘরের সর্বোচ্চ-প্রস্থ সেট করতে পারি?


"কাজ করে না" এর উপর দয়া করে প্রসারিত করুন ।
স্পার্কি

4
আপনাকে অবশ্যই নিশ্চিত করতে হবে যে আপনার টিডির প্যারেন্টটি একটি নির্দিষ্ট প্রস্থ রয়েছে (আপনি প্রস্থটিই 100% ছাড়িয়ে যাবেন; শরীর থেকে আপনার টিডির সমস্ত পথ পর্যন্ত, অথবা আপনি প্যারেন্টকে (এখানে: ত্রি) 1000px দিতে পারেন বা আপনি যা পছন্দ করেন সিএসএসে %% ব্যবহার করার সময় এটি সর্বদা পিতামাতার মধ্যে সংজ্ঞায়িত সঠিক px ব্যবহার করে এবং তারপরে তাদের পিতামাতার তুলনায় আকারের হিসাবে পিক্সগুলি %% তে রূপান্তর করে
ফিলিপ মেসনার

রেকর্ডের জন্য, সর্বোচ্চ-প্রস্থ এখন সাফারি এবং ক্রোমে কাজ করে। আমি নিশ্চিত নই যে এটি কত দিন ধরে সমর্থনযোগ্য।
জয়

উত্তর:


73

সিএসএস ২.১ স্পেসে সর্বাধিক প্রস্থের সংজ্ঞা অনুসারে , "টেবিল, ইনলাইন টেবিল, টেবিল সেল, টেবিল কলাম এবং কলামের গোষ্ঠীতে 'ন্যূনতম প্রস্থ' এবং 'সর্বাধিক প্রস্থের' প্রভাব নির্ধারিত। সুতরাং আপনি সরাসরি একটি টিডি উপাদানের উপর সর্বোচ্চ-প্রস্থ সেট করতে পারবেন না।

যদি আপনি কেবল দ্বিতীয় কলামটি সর্বাধিক 67% অবধি গ্রহণ করতে চান তবে আপনি প্রস্থটি (যা ন্যূনতম প্রস্থে সারণী কোষগুলির জন্য কার্যকর হয়) 33% তে সেট করতে পারেন, উদাহরণস্বরূপ উদাহরণস্বরূপ

td:first-child { width: 33% ;}

উভয় কলামের জন্য এটি নির্ধারণ করা ভাল কাজ করবে না, কারণ এটি ব্রাউজারগুলি কলামগুলিকে সমান প্রস্থ দেয়।


আসলে সাফারি এবং ক্রোমে এখন সর্বাধিক প্রস্থ কাজ করে। আমি নিশ্চিত নই যে এটি কত দিন ধরে সমর্থনযোগ্য।
জয়

118

পুরানো প্রশ্ন আমি জানি, তবে এটি এখন table-layout: fixedটেবিল ট্যাগে CSS সম্পত্তি ব্যবহার করে সম্ভব । এই প্রশ্নের উত্তর নীচে সিএসএস শতাংশের প্রস্থ এবং একটি টেবিল ঘরে পাঠ্য-ওভারফ্লো

এটি সহজেই ব্যবহার করে করা হয় table-layout: fixedতবে কিছুটা জটিল কারণ এই সিএসএস সম্পত্তি সম্পর্কে অনেকেই জানেন না।

table {
  width: 100%;
  table-layout: fixed;
}

এটি এখানে আপডেট হওয়া ফ্রিডলে কর্মে দেখুন: http://jsfiddle.net/Fm5bM/4/


4
ধন্যবাদ! আমার ভয় ছিল স্থির হওয়ার অর্থ এটি কোষগুলির প্রস্থের পুনরায় গণনা করবে না যার কোনও প্রস্থ সেট নেই, তবে ভাগ্যক্রমে এটি ক্ষেত্রে নেই।
ফ্যাসেল করুন

4
আপনার jsfiddle এ আমি প্রস্থের বৈশিষ্ট্যগুলি সরিয়ে দিলে সর্বাধিক প্রস্থটি এখনও কাজ করে না তাই এটি কীভাবে সমস্যার সমাধান করে তা নিশ্চিত হন না।
frezq

6
@ সুফেরফোনিক আমি মনে করি আপনি বিভ্রান্ত আপনি যদি max-widthসেই jsfiddle এ সরিয়ে থাকেন তবে প্রস্থটি একই থাকবে তাই এটি max-widthসেট করে না। আপনি যদি max-width: 10%প্রথমটির সাথে এটি প্রতিস্থাপন করেন তবে এটি আরও পরিষ্কার হতে পারে td... আপনি দেখতে পাবেন যে এটি পরিবর্তন হয় না। jsfiddle.net/w3f8ey22/1
frezq

5
টেবিল-বিন্যাস: স্থির করা ওপি ইস্যু সমাধান করে না। এটি কোনও টেবিল কক্ষে যাদুকরীভাবে 'মিনি প্রস্থ' কাজ করে না। টেবিল-বিন্যাস: স্থির সরানো থাকলে উভয় রেফারেন্সড ফিডলগুলির প্রদর্শনে পার্থক্য নেই।
cramriman

4
এই উত্তরটি বিভ্রান্তিকর কারণ এটি প্রশ্নের সাথে সম্পর্কিত নয়
জোল্টন সেল

9

আমি জানি এটি আক্ষরিক এক বছর পরে, তবে আমি অনুভব করেছি যে আমি ভাগ করে নেব। আমি একই জিনিসটি করার চেষ্টা করছিলাম এবং আমার জন্য কাজ করা এই সমাধানটি পেলাম। আমরা পুরো টেবিলের জন্য সর্বাধিক প্রস্থ নির্ধারণ করেছি, তারপরে কাঙ্ক্ষিত প্রভাবের জন্য কক্ষের আকারগুলির সাথে কাজ করেছি।

টেবিলটিকে তার নিজস্ব ডিভিতে রাখুন, তারপরে পুরো টেবিলের জন্য পছন্দসই হিসাবে প্রস্থ, ন্যূনতম প্রস্থ এবং / অথবা ডিভের সর্বোচ্চ-প্রস্থ নির্ধারণ করুন। তারপরে, আপনি কাজ করতে পারেন এবং অন্যান্য কক্ষের জন্য প্রস্থ এবং ন্যূনতম প্রস্থকে সেট করতে পারেন এবং ডিভের জন্য সর্বাধিক প্রস্থটি কার্যকরভাবে আমরা চেয়েছি সর্বাধিক প্রস্থ অর্জনের জন্য চারপাশে এবং পিছনের দিকে কাজ করে।

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

স্বীকার করা যায়, এটি আপনাকে প্রতি সেউসের একটি "সর্বোচ্চ" প্রস্থ দেয় না, তবে এটি এমন কিছু নিয়ন্ত্রণের অনুমতি দেয় যা এই জাতীয় বিকল্পের পরিবর্তে কাজ করতে পারে। এটি আপনার প্রয়োজনের জন্য কাজ করবে কিনা তা নিশ্চিত নয়। আমি জানি যে এটি আমাদের পরিস্থিতির জন্য কাজ করেছে যেখানে আমরা পৃষ্ঠায় নেভিগেশন দিকটি একটি বিন্দুতে স্কেল করতে এবং এই মুহুর্তে সমস্ত প্রশস্ত পর্দার জন্য চাই।


0

শতাংশটি একটি নিখুঁত আকারের তুলনায় হওয়া উচিত, এটি চেষ্টা করুন:

<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
table{width:200px;}
td{width:65%;border:1px solid black;}
</style>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.