স্থির সারণি ঘর প্রস্থ

Question

লেআউট নিয়ন্ত্রণ, ডেটা ইত্যাদিতে এখনও প্রচুর লোক সারণী ব্যবহার করে - এর একটি উদাহরণ হ'ল জনপ্রিয় জেকিগ্রিড। যাইহোক, এমন কিছু জাদু ঘটছে যা আমি অনুধাবন করতে পারছি না (উচ্চস্বরে চিৎকার করার জন্য এর সারণীগুলি, সেখানে সম্ভবত কতটা যাদু থাকতে পারে?)

কোনও টেবিলের কলামের প্রস্থ সেট করা এবং জেকিগ্রিডের মতো এটি মান্য করা কীভাবে সম্ভব !? যদি আমি এটির অনুলিপি করার চেষ্টা করি, এমনকি যদি আমি প্রতিটি সেট করি <td style='width: 20px'>, তত তাড়াতাড়ি of কোষগুলির কোনও একটির সামগ্রী 20px এর চেয়ে বেশি হয়ে যায়, ঘরটি প্রসারিত হয়!

কোন ধারণা বা অন্তর্দৃষ্টি?

Answer 1

আপনি <col>সমস্ত সারিগুলির জন্য ট্যাগ ম্যানেজ টেবিল স্টাইলিং ব্যবহার করে চেষ্টা করতে পারেন তবে আপনাকে table-layout:fixedস্টাইলটি <table>টেবিল সিএসএস শ্রেণিতে সেট করতে হবে এবং ঘরগুলির overflowজন্য স্টাইলটি সেট করতে হবে

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

এবং এটি আপনার সিএসএস হবে

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Comments

কর্ন

— এইচটিএমএল

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

— thebdawk05

যখন আপনার কেবলমাত্র 1 টিডি উপাদান রয়েছে যা একাধিক কলামগুলিকে বিস্তৃত করে সেখানে সারি থাকে? আপনার স্যাম্পল কোডটি ব্যবহার করে, যদি আপনার <TD colspan="3">নিজেই এক সারি থাকে তবে এটি 90px হবে?

— sab669

ধন্যবাদ এটি সাহায্য করেছে। ওভারল্যাপিং ডেটার জন্য, এটি যুক্ত করুন table.fixed td { word-wrap: break-word; }।

— পরগ ত্যাগী

শব্দ বিরতি পরামর্শ প্রয়োজনীয় নয়, তবে এটি বাকী SO ব্যবহারকারীদের জন্য এবং প্রশ্নটির জন্য যথেষ্ট প্রাসঙ্গিক, কারণ নির্দিষ্ট প্রস্থের টেবিলগুলিতে উপচে পড়া বিষয়বস্তু প্রায়শই বেশিরভাগ পরিস্থিতিতে দৃoc়ভাবে নিশ্চিত।

— অ্যামি পেলেগ্রিনি

Answer 2

এইচটিএমএল 5 / সিএসএস 3 এ আমাদের সমস্যার আরও ভাল সমাধান রয়েছে। আমার মতে খাঁটি সিএসএস সমাধানটি প্রস্তাবিত:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/

<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

আপনি টেবিল সেট করতে হবে widthএমনকি haunter এর সমাধান । অন্যথায় এটি কাজ করে না।
একটি নতুন সিএসএস 3 বৈশিষ্ট্য যা VSync প্রস্তাব হল: word-break:break-all;। এটি শব্দগুলিকে ফাঁকা ছাড়াই একাধিক লাইনে ভেঙে দেবে। কেবল কোডটির মতো এটি পরিবর্তন করুন:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

সর্বশেষ ফলাফল

Comments

আপনি যদি একটি দিয়ে একটি সারি ফেলে দেন তবে এটি colspanএই সমাধানটি ভঙ্গ করে বলে মনে হচ্ছে। এই সমাধানটি কোনও টেবিলের সাথে colspan> 1 ব্যবহার করে কীভাবে ব্যবহার করবেন সে সম্পর্কে কোনও পরামর্শ ?

— এরিক কে

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

— অ্যারোনএলএস

@ টোটেমেডলি কীভাবে আমার সমস্ত কলামের প্রশস্ততার যোগফলগুলি যোগ করতে আমার টেবিলটি পাবেন? আমার টেবিলটি গতিশীলভাবে কিছুটা উত্পন্ন হয়েছে এবং আমি টেবিলের প্রস্থ অগ্রিম গণনা করতে পারি না, তবে আমি 100% ব্যবহার করতে চাই না কারণ এটি কিছু উপাদানকে প্রসারিত করে।

— অ্যারোনএলএস

Answer 3

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Comments

আপনি কি নিশ্চিত যে আপনি table-layoutএকটি টিডি উপাদান ব্যবহার করতে পারেন ?

— নিক

@ নিক - এটি ঠিক আছে। Hovewer আমাকে ন্যূনতম প্রস্থ এবং সর্বোচ্চ-প্রস্থের সম্পত্তিও যুক্ত করতে হবে (প্রস্থের সমান মান) এবং তারপরে এটি সত্যিকারের স্থির প্রস্থে পরিণত হয়েছিল।

— ডেনিস খায়

Answer 4

আমার একটি দীর্ঘ টেবিল টিডি সেল ছিল, এটি টেবিলটি ব্রাউজারের প্রান্তগুলিতে বাধ্য করেছিল এবং কুরুচিপূর্ণ দেখাচ্ছে। আমি কেবল চেয়েছিলাম যে কলামটি কেবলমাত্র আকারের আকারের হয়ে যায় এবং নির্দিষ্ট প্রস্থে পৌঁছালে শব্দগুলি ভেঙে দেয়। সুতরাং এটি আমার পক্ষে ভাল কাজ করেছে:

<td><div style='width: 150px;'>Text to break here</div></td>

টেবিল, ত্রি উপাদানগুলিতে আপনার কোনও ধরণের স্টাইল নির্দিষ্ট করার দরকার নেই। আপনি ওভারফ্লো ব্যবহার করতে পারেন: লুকানো; অন্যান্য উত্তর দ্বারা প্রস্তাবিত হিসাবে এটি অতিরিক্ত পাঠ্য অদৃশ্য হয়ে যায়।

Comments

অথবা আপনি যেখানে প্রয়োজন সেখানে প্রস্থের পরিবর্তে সর্বোচ্চ-প্রস্থ ব্যবহার করতে পারেন। এটি আপনাকে প্রস্থের সীমাতে না পৌঁছে দিলে পাঠ্যটি ভঙ্গ করতে দেয় না। এবং যদি আপনার পাঠ্য নির্দিষ্ট প্রস্থের চেয়ে ছোট হয় সারণী কক্ষে ফাঁকা জায়গা থাকবে না। <td> <ডিভ স্টাইল = 'সর্বাধিক প্রস্থ: 150px;'> এখানে ভাঙার পাঠ্য </ div> </td>

— তারিক

Answer 5

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

Answer 6

সম্পূর্ণ স্ক্রিন প্রস্থ সারণীর জন্য:

• টেবিল প্রস্থ 100% হতে হবে

• যদি এন কলোনমগুলির প্রয়োজন হয়, তবে এইগুলি এন +1 হওয়া আবশ্যক

3 কলামের উদাহরণ:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

Answer 7

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: প্রথম সন্তান ...: নবম সন্তান (1) বা ...