সারণী কলামের প্রস্থ নির্ধারণ করা হচ্ছে

Question

আমি একটি সাধারণ টেবিল পেয়েছি যা ইনবক্সের জন্য ব্যবহৃত হয়:

<table border="1">
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>

আমি প্রস্থটি কীভাবে সেট করব তাই থেকে তারিখটি পৃষ্ঠা প্রস্থের 15% এবং বিষয় 70%। আমি টেবিলটি পুরো পৃষ্ঠার প্রস্থ গ্রহণ করতে চাই।

Answer 1

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    
    
    
    <!-- Put <thead>, <tbody>, and <tr>'s here! -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Comments

এই সমাধানটির পরিষ্কার পরিচ্ছন্নতা পছন্দ করুন। তবে দয়া করে কলটি বন্ধ করুন যেমন <কল স্প্যান = "1" শৈলী = "প্রস্থ: 15%;" /> বা <কল স্প্যান = "1" শৈলী = "প্রস্থ: 15%;"> </col>

— lsu_guy

@ ইসু_গুই আপনি কেবলমাত্র <col> বন্ধ করুন এক্সএইচটিএমএল ব্যবহার করার সময় - এইচটিএমএলে, <col> ট্যাগটির কোনও বন্ধ নেই ... আরও তথ্যের জন্য লিঙ্কটি দেখুন। এইচটিএমএল 5-তে, <col> একটি

— শূন্য

@Zulu অনুযায়ী w3schools.com/tags/att_col_width.asp "<কর্নেল> প্রস্থ অ্যাট্রিবিউট HTML5 এর মধ্যে সমর্থিত নয়।"

— কলটার

@ কল্টর: কোডটি <col> ব্যবহার করছে নাwidth attribute ; এটি একটি ব্যবহার করছে CSS *style* widthযা <col> প্রস্থের বৈশিষ্ট্যটিকে প্রতিস্থাপন করেছে। (একাধিক লোকেরা মন্তব্য করে ভোট দেওয়ার পরেও!)

— টুলমেকারস্টেভ

span="1"1 টি ডিফল্ট হওয়ায় অতিরিক্ত অতিরিক্ত হয়।

— ম্যাডব্রেকস

Answer 2

এইচটিএমএল:

<table>
  <thead>
    <tr>
      <th class="from">From</th>
      <th class="subject">Subject</th>
      <th class="date">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[from]</td>
      <td>[subject]</td>
      <td>[date]</td>
    </tr>
  </tbody>
</table>

সিএসএস:

table {
  width: 100%;
  border: 1px solid #000;
}
th.from, th.date {
  width: 15%
}
th.subject {
  width: 70%; /* Not necessary, since only 70% width remains */
}

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

দ্রষ্টব্য, ইন্টারনেট এক্সপ্লোরার এর পুরানো সংস্করণে কাজ করার জন্য আপনাকে আপনার টেবিলটিকে একটি নির্দিষ্ট প্রস্থ (উদাহরণস্বরূপ, 900px) দিতে হতে পারে। সেই ব্রাউজারে শতাংশের মাত্রা সহ কোনও উপাদান রেন্ডার করতে কিছু সমস্যা আছে যদি এর রেপারে সঠিক মাত্রা না থাকে।

Comments

আপনার প্রথম সারিতে কলস্পান থাকলে এই সমাধানটি ব্যর্থ হয়

— মার্ক 1234

ভাল কারণ << প্রস্থ = ""> এইচটিএমএল 5: বিকাশকারী.মোজিলা.আর.ইন

— রিচার্ড

Answer 3

নীচের সিএসএস ব্যবহার করুন, প্রথম ঘোষণাটি আপনার প্রদত্ত প্রস্থগুলিতে আপনার টেবিলটি আটকে থাকবে তা নিশ্চিত করবে (আপনাকে আপনার HTML এ ক্লাস যুক্ত করতে হবে):

table{
  table-layout:fixed;
}
th.from, th.date {
  width: 15%;
}
th.subject{
  width: 70%;
}

Comments

আসলে আপনাকে কেবল দুটি কলামের প্রস্থ নির্দিষ্ট করতে হবে। তৃতীয়টি স্বয়ংক্রিয়ভাবে গণনা করা হবে, তাই table{table-layout:fixed};.from,.date{width:15%}যথেষ্ট। ক্লাসগুলি অন্য উপাদানগুলিতেও ব্যবহার th.fromনা করা অবধি লেখাগুলি অপ্রয়োজনীয় এবং সংক্ষিপ্ত করে ছোট করা যায় .from।

— tomasz86

Answer 4

সিএসএস ফাইলে আপনার স্টাইলগুলি রাখার সময় কেবল একটি শ্রেণির সাথে বিকল্প উপায়, যা আইআই 7 তেও কাজ করে:

<table class="mytable">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>
<style>
    .mytable td, .mytable th { width:15%; }
    .mytable td + td, .mytable th + th { width:70%; }
    .mytable td + td + td, .mytable th + th + th { width:15%; }
</style>

সাম্প্রতিককালে, আপনি nth-child()সিএসএস 3 (আই 9 +) থেকে নির্বাচকও ব্যবহার করতে পারেন , যেখানে আপনি কেবল এনআরআর রেখেছিলেন। সংলগ্ন নির্বাচকের সাথে একত্রে স্ট্রিংয়ের পরিবর্তে ক্যার্থেসিসে সংশ্লিষ্ট কলামে। এটি পছন্দ করুন, উদাহরণস্বরূপ:

<style>
    .mytable tr > *:nth-child(1) { width:15%; }
    .mytable tr > *:nth-child(2) { width:70%; }
    .mytable tr > *:nth-child(3) { width:15%; }
</style>

Comments

:nth-childপারফরম্যান্সের ক্ষেত্রে প্রস্তাবিত সমাধানটি ভয়াবহ। এই উদাহরণে এটি ব্যবহার করার কোনও বৈধ কারণ নেই (বিশেষত সর্বজনীন নির্বাচকের সাথে) যেখানে শৈলীতে মাত্র তিনটি উপাদান ( thবা col) রয়েছে। অতিরিক্তভাবে, আপনাকে কেবল thপ্রথম সারির প্রস্থে প্রস্থ স্থাপন করতে হবে । .mytable tdপ্রথম উদাহরণে অপ্রয়োজনীয়।

— tomasz86

"প্রস্তাবিত: নবম-সন্তানের সমাধান পারফরম্যান্সের ক্ষেত্রে ভয়াবহ" " - তথ্যসূত্র প্রয়োজন.

— ড্যানমান

এটি যথেষ্ট হওয়া উচিত: দক্ষতার সাথে সিএসএস রেন্ডারিং । আপনার সর্বজনীন নির্বাচক ব্যবহারের সাথে ব্রাউজারটি প্রথমে সমস্ত উপাদানগুলি অন্য উপাদানের নবম সন্তানের কিনা তা পরীক্ষা করে দেখবে, যদি তাদের সরাসরি পিতামাতা হয় trএবং তারপরে তারা তাদের অন্তর্ভুক্ত কিনা .mytable। আপনি কি সত্যিই "n তম" ব্যবহার করতে চান, তাহলে ভালো কিছু সম্ভবত অনেক ভালো হবে: .mytable th:nth-of-type(1) {width: 15%}; .mytable th:nth-of-type(2) {width: 70%};। এই ক্ষেত্রে তৃতীয় কলামের প্রস্থ নির্দিষ্ট করার দরকার নেই।

— tomasz86

ব্যক্তিগতভাবে আমি ক্লাস বা কেবল ব্যবহার করতাম .mytable th+th{width: 70%}.mytable th+th+th{width:15%}। "নবম" নির্বাচকরা নিজেরাই খুব দরকারী হতে পারেন তবে এই বিশেষ ক্ষেত্রে (কেবলমাত্র 3 টি কলাম সহ একটি ছোট টেবিল) সত্যই প্রয়োজন হয় না। যখন ব্যবহার table-layout: fixedআপনি এমনকি শুধু এই করতে পারেন: table{table-layout:fixed}th:first-child+th{width:70%}।

— tomasz86

আমি এটার ব্যাপারে অবগত. তবে সেই নিবন্ধগুলি বহু বছর আগের, এবং আজ বৃহত্তর সমস্যা রয়েছে যে সিএসএস নির্বাচকরা, বিপুল পরিমাণে চিত্র এবং জেএস কোডের মতো।

— ড্যানমান

Answer 5

এই আমার দুটি পরামর্শ।

1. ক্লাস ব্যবহার করে। অন্য দুটি কলামের প্রস্থ নির্দিষ্ট করার প্রয়োজন নেই কারণ সেগুলি ব্রাউজার দ্বারা স্বয়ংক্রিয়ভাবে প্রতি 15% এ সেট করা হবে।

       table { table-layout: fixed; }
       .subject { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th class="subject">Subject</th>
           <th>Date</th>
         </tr>
       </table>

2. ক্লাস ব্যবহার না করেই। তিনটি পৃথক পদ্ধতি কিন্তু ফলাফল অভিন্ন।

   ক)

       table { table-layout: fixed; }
       th+th { width: 70%; }
       th+th+th { width: 15%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   খ)

       table { table-layout: fixed; }
       th:nth-of-type(2) { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

   গ) এটি আমার প্রিয়। খ হিসাবে একই) তবে আরও ভাল ব্রাউজার সমর্থন সহ।

       table { table-layout: fixed; }
       th:first-child+th { width: 70%; }

       <table>
         <tr>
           <th>From</th>
           <th>Subject</th>
           <th>Date</th>
         </tr>
       </table>

Answer 6

আপনার শরীরের উপর নির্ভর করে (বা ডিভ যা আপনার টেবিলটি আবৃত করছে) 'সেটিংস' আপনার এটি করতে সক্ষম হবেন:

body {
  width: 98%;
}

table {
  width: 100%;
}


th {
  border: 1px solid black;
}


th.From, th.Date {
  width: 15%;
}

th.Date {
  width: 70%;
}


<table>
  <thead>
    <tr>
      <th class="From">From</th>
      <th class="Subject">Subject</th>
      <th class="Date">Date</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Me</td>
       <td>Your question</td>
       <td>5/30/2009 2:41:40 AM UTC</td>
     </tr>
   </tbody>
</table>

ডেমো

Answer 7

    table { table-layout: fixed; }
    .subject { width: 70%; }

    <table>
      <tr>
        <th>From</th>
        <th class="subject">Subject</th>
        <th>Date</th>
      </tr>
    </table>

Answer 8

<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

ডেমো

Comments

কোল প্রস্থের বৈশিষ্ট্যটি HTML5 তে সমর্থিত নয়।

— রুন

Answer 9

পরিবর্তে এটি চেষ্টা করুন।

<table style="width: 100%">
    <tr>
        <th style="width: 20%">
           column 1
        </th>
        <th style="width: 40%">
           column 2
        </th>
        <th style="width: 40%">
           column 3
        </th>
    </tr>
    <tr>
        <td style="width: 20%">
           value 1
        </td>
        <td style="width: 40%">
           value 2
        </td>
        <td style="width: 40%">
           value 3
        </td>
    </tr>
</table>

Answer 10

সীমানা বৈশিষ্ট্যটি ব্যবহার করবেন না, আপনার সমস্ত স্টাইলিং প্রয়োজনের জন্য সিএসএস ব্যবহার করুন।

<table style="border:1px; width:100%;">
    <tr>
            <th style="width:15%;">From</th>
            <th style="width:70%;">Subject</th>
            <th style="width:15%;">Date</th>
    </tr>
... rest of the table code...
</table>

তবে এর মতো সিএসএস এম্বেড করা দুর্বল অনুশীলন - এর পরিবর্তে সিএসএস ক্লাস ব্যবহার করা উচিত এবং সিএসএস বিধিগুলি একটি বাহ্যিক সিএসএস ফাইলে রাখা উচিত।

Comments

আমি সন্দেহ করব যে ওপি এবং সহায়ক স্ট্যাকওভারফ্লোয়ানদের পোস্ট করা উদাহরণ কোডটি সুদৃ .়তা এবং সরলতার জন্য, কোনওভাবেই ইনলাইন শৈলীর জন্য উত্সাহ নয়।

— তাস

Answer 11

সিএসএসে এটি করার আরও একটি নূন্যতম উপায় যা এখানে পুরানো ব্রাউজারগুলিতেও কাজ করে যা সমর্থন করে না :nth-childএবং পছন্দকারী নির্বাচকদের: http://jsfiddle.net/3wZWt/ ।

এইচটিএমএল:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
    <tr>
        <td>Dmitriy</td>
        <td>Learning CSS</td>
        <td>7/5/2014</td>
    </tr>
</table>

সিএসএস:

table {
    border-collapse: collapse;
    width: 100%;
}

tr > * {
    border: 1px solid #000;
}

tr > th + th {
    width: 70%;
}

tr > th + th + th {
    width: 15%;
}

Answer 12

আপনার টেবিল ট্যাগের পরে কলগ্রুপ যুক্ত করুন। এখানে প্রস্থ এবং কলামের সংখ্যা নির্ধারণ করুন। এবং টডি ট্যাগ যুক্ত করুন। আপনার টিআর টিবি ভিতরে রাখুন।

<table>
    <colgroup>
       <col span="1" style="width: 30%;">
       <col span="1" style="width: 70%;">
    </colgroup>


    <tbody>
        <tr>
            <td>First column</td>
            <td>Second column</td>
        </tr>
    </tbody>
</table>

Answer 13

style="column-width:300px;white-space: normal;"

Comments

হাই - স্ট্যাক ওভারফ্লোতে আপনাকে স্বাগতম সাধারণভাবে, পাঠ্য সহ উত্তর (কেবল কোডের পরিবর্তে) এবং কিছু ব্যাখ্যা কেবল কোড-উত্তর উত্তরের চেয়ে ভাল হিসাবে দেখা হয়। যেহেতু এই প্রশ্নটি পুরান এবং এর আরও অনেক উত্তর রয়েছে তাই তারা ভবিষ্যতের উত্তরে আপনাকে গাইড করতে সহায়তা করতে পারে।

— jwheron