টেবিল কলামের প্রস্থকে সর্বদা বিষয়বস্তু নির্বিশেষে স্থির করতে বাধ্য করুন

Question 1

আমার সাথে একটি এইচটিএমএল টেবিল table-layout: fixedএবং একটি সেট প্রস্থ সহ একটি টিডি রয়েছে। কলামটি এখনও স্থান না থাকা পাঠ্যের সামগ্রীগুলি ধরে রাখতে প্রসারিত হয়। প্রতিটি টিডির বিষয়বস্তু একটি ডিভের মধ্যে মোড়ানো ছাড়াও এটির কোনও সমাধান করার উপায় আছে কি?

উদাহরণ: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

উদাহরণস্বরূপ, আপনি দেখতে পাচ্ছেন যে এএএএএএএএএএএএএ ... এর সাথে কলামটি প্রসারিতভাবে 50px প্রশস্তভাবে সত্ত্বেও প্রসারিত হয়।

Question 2

সারণীর প্রস্থ উল্লেখ করুন:

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

JsFizz দেখুন

Question 3

নিম্নলিখিত সিএসএসে দেখার চেষ্টা করুন:

word-wrap:break-word;

ওয়েব ব্রাউজারগুলির ডিফল্টরূপে "শব্দ" ভাঙা উচিত নয় সুতরাং আপনি যা अनुभव করছেন তা ব্রাউজারের স্বাভাবিক আচরণ। তবে আপনি শব্দ-মোড়ানো সিএসএস নির্দেশিকা দিয়ে এটিকে ওভাররাইড করতে পারেন।

আপনাকে সামগ্রিক টেবিলের প্রস্থ এবং তারপরে কলামগুলিতে একটি প্রস্থ নির্ধারণ করতে হবে। "প্রস্থ: 100%;" আপনার প্রয়োজনীয়তার উপর নির্ভর করে ঠিক থাকা উচিত।

ওয়ার্ড-র‌্যাপ ব্যবহার করা আপনি যা চান তা নাও হতে পারে তবে লেআউটটি বিকৃত না করেই সমস্ত ডেটা প্রদর্শন করার জন্য এটি দরকারী।

Question 4

CSS এর আগে টেবিল রকটিকে শক্ত করুন। আপনার টেবিলটির প্রস্থটি চিত্রিত করুন, তারপরে একটি 'নিয়ন্ত্রণকারী' সারিটি ব্যবহার করুন যার মাধ্যমে প্রতিটি টিডির একটি স্পষ্ট প্রস্থ থাকবে, এগুলি সমস্তই টেবিল ট্যাগের প্রস্থে যুক্ত হবে।

প্রথমে সঠিক এইচটিএমএল ব্যবহার করে যেকোন জায়গায় কাজ করতে শত শত এইচটিএমএল ইমেলগুলি করা, তারপরে স্টাইলিং ডাব্লু / সিএসএস সমস্ত আইই, ওয়েবকিট এবং মজিলাসে অনেকগুলি সমস্যা নিয়ে কাজ করবে।

সুতরাং:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

300px প্রশস্ত একটি টেবিল রাখবে। চূড়ান্তভাবে প্রস্থের চেয়ে বড় যে চিত্রগুলি দেখুন

Question 5

আপনি একটি যোগ করতে পারেন divথেকে td, তারপর শৈলী যে। এটি আপনার প্রত্যাশা অনুযায়ী কাজ করা উচিত।

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

তারপরে সিএসএস।

td div { width: 50px; overflow: hidden; }

Question 6

আপনি "ওভারফ্লো: লুকানো" বা "ওভারফ্লো-এক্স: লুকানো" (কেবল প্রস্থের জন্য) দিয়েও কাজ করতে পারেন। এটির জন্য একটি সংজ্ঞায়িত প্রস্থ (এবং / বা উচ্চতা?) এবং সম্ভবত একটি "প্রদর্শন: ব্লক" প্রয়োজন।

"ওভারফ্লো: লুকানো" পুরো সামগ্রীটি গোপন করে, যা সংজ্ঞায়িত বাক্সে ফিট করে না।

উদাহরণ:

http://jsfiddle.net/NAJvp/

এইচটিএমএল:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

সিএসএস:

td div { width: 100px; overflow-y: hidden; }

সম্পাদনা: লজ্জা আমার, আমি দেখেছি, আপনি ইতিমধ্যে "ওভারফ্লো" ব্যবহার করেছেন। আমার ধারণা এটি কার্যকর হয় না, কারণ আপনি আপনার উপাদানটিতে "প্রদর্শন: ব্লক" সেট করেন না ...

Question 7

আমি এটি সর্বোচ্চ-প্রস্থে সেট করার চেষ্টা করব: 50px;

Question 8

আপনি শতাংশ ব্যবহার করতে পারেন, এবং / অথবা কলাম শিরোনামে নির্দিষ্ট করতে পারেন:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

শতাংশ সহ বোনাস হ'ল কোড রক্ষণাবেক্ষণ: আপনি কলামের প্রস্থকে আবার নির্দিষ্ট না করেই আপনার টেবিলের প্রস্থ পরিবর্তন করতে পারেন।

ক্যাভ্যাট: এটি আমার বোঝার মতো যে পিক্সেলগুলিতে নির্দিষ্ট টেবিলের প্রস্থটি এইচটিএমএল 5 এ সমর্থিত নয়; পরিবর্তে আপনার সিএসএস ব্যবহার করতে হবে।

Question 9

এটি আমার পক্ষে কাজ করে

td::after { 
content: ''; 
display: block; 
width: 30px;
}