<td> এর জন্য নির্দিষ্ট প্রস্থ কীভাবে সেট করবেন?

Question

সাধারণ পরিকল্পনা:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

এর জন্য আমার একটি নির্দিষ্ট প্রস্থ স্থাপন করা দরকার <td>। আমি চেষ্টা করেছিলাম:

tr.something {
  td {
    width: 90px;
  }
}

এছাড়াও

td.something {
  width: 90px;
}

জন্য

<td class="something">B</td>

আর যদি

<td style="width: 90px;">B</td>

তবে প্রস্থ <td>এখনও একইরকম।

Comments

আমি চেষ্টা করেছি এবং এটি কাজ করে - সমস্যাটি অন্য কোথাও অন্যরকম হতে পারে। ফায়ারবাগ উপাদান সম্পর্কে আপনাকে কী বলে?

— রকবট

এই সাইটে , মানুষ ভিডিও সহ এই বিষয় সম্পর্কে বলছে। এটা তাই পরিষ্কার।

— Egemen

style="width: 1% !important;"কলামের দীর্ঘতম শব্দের মতো প্রস্থকে আরও শক্ত করতে ব্যবহার করুন , এটি প্রথম আইডি / # কলামের জন্য দরকারী। Chrome এ পরিক্ষিত (ডেস্কটপ ও মোবাইল), অপেরা (ডেস্কটপ), ইন্টারনেট (ডেস্কটপ), প্রান্ত (ডেস্কটপ), ফায়ারফক্স (ডেস্কটপ)

— vinsa

Answer 1

বুটস্ট্র্যাপ 4.0 এর জন্য:

বুটস্ট্র্যাপ 4.0.০.০ এ আপনি col-*ক্লাসগুলি নির্ভরযোগ্যভাবে ব্যবহার করতে পারবেন না (ফায়ারফক্সে কাজ করে তবে ক্রোমে নয়)। আপনাকে ওহাদআরের উত্তরটি ব্যবহার করতে হবে :

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

বুটস্ট্র্যাপ 3.0 এর জন্য:

টুইটার বুটস্ট্র্যাপের সাথে 3 ব্যবহার করুন: class="col-md-*"যেখানে * প্রস্থের কয়েকটি কলাম।

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

বুটস্ট্র্যাপ 2.0 এর জন্য:

টুইটার বুটস্ট্র্যাপের সাথে 2 ব্যবহার করুন: class="span*"যেখানে * প্রস্থের কয়েকটি কলাম।

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** আপনার যদি <th>উপাদানগুলির প্রস্থ সেট করে থাকে তবে <td>উপাদানগুলির উপরে নয়।

Comments

আপনার যদি 12 টিরও বেশি কলাম থাকে তবে কী হবে?

— ক্লিয়ারক্লাউড 8

আপনি এটি প্রতিটি <

— ঠা

বুটস্ট্র্যাপ ওয়েবসাইটে এটি সম্পর্কে কোনও ডকুমেন্টেশন আছে কি?

— লুইস পেরেজ

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

— ডাস্টিনএ

এছাড়াও, ক্লাসটি পৌঁছনোর জন্য সেট করার পরিবর্তে, আমরা কেবল একবার এটি হেডারের <<< জন্য সেট করতে পারি এবং বাকিটি স্বয়ংক্রিয়ভাবে যত্ন নেওয়া হয়!

— ডপপ্লসোল্ডার

Answer 2

আমার একই সমস্যা ছিল, আমি টেবিলটি স্থির করে দিয়েছি এবং তারপরে আমার টিডি প্রস্থ উল্লেখ করেছি। আপনার যদি থাকে তবে আপনি সেগুলিও করতে পারেন।

table {
    table-layout: fixed;
    word-wrap: break-word;
}

টেমপ্লেট:

<td style="width:10%">content</td>

কোনও লেআউট গঠনের জন্য দয়া করে সিএসএস ব্যবহার করুন।

Comments

শিওর স্ট্যাকওভারফ্লো.

— com/ সেকশনস / १२৮০১6710//html-td-width- এবং-

এই মহান, কিন্তু একটি ছাড়াও ব্যবহার যেমন classমধ্যে tdট্যাগটি পরিবর্তে সরাসরি শৈলী প্রয়োগ

— রামসেস

এই যেমন প্রশস্ততা বৃদ্ধি করার জন্য যথেষ্ট ভাল ধন্যবাদ কাজ করে th: <th style="width: 25%;"></th>এটি অন্যান্য কলামের প্রস্থকে প্রভাবিত করবে

— শেইজুত

ধন্যবাদ! আমি বুটস্ট্র্যাপ 3 এর জন্য কল-এমডি-এক্স ক্লাস স্থাপন করেছি তবে এটি কার্যকর হয়নি। টেবিল লেআউটটিকে "স্থির" হিসাবে সেট করা আমার সমস্যার সমাধান করে।

— মরিশরেক্স

এইটা কাজ করে. চাবিকাঠি table-layout: fixed। এটি প্রয়োজনীয় কারণ বিএস 4 দিয়ে তৈরি অনেকগুলি টেম্পলেটগুলি সারণী সহ সমস্ত কিছুতে নমনীয় প্রয়োগ করে।

— ইভান

Answer 3

col-md-*প্রতিটি tdসারিতে ক্লাস প্রয়োগ করার পরিবর্তে আপনি একটি তৈরি করতে পারেন colgroupএবং ক্লাসগুলিকে colট্যাগটিতে প্রয়োগ করতে পারেন ।

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

এখানে ডেমো

Comments

আমি এটি পছন্দ করি তবে এটি আমার ক্ষেত্রে কোনও প্রভাব ফেলবে বলে মনে হচ্ছে না, কলাম-এমডি- * দ্বারা কলামের প্রস্থটি প্রসারিত হবে না

— 06

আমি এই সমাধানটি পছন্দ করি, যাইহোক, কেন কেউ কল-এমডি- * ক্লাস ব্যবহার করতে বাধ্য হয় এবং কল-এলজি- *, কর্ন-স্ম- * বা কর্ন-এক্সএস- * নয়?

— লুসিওবি

@ লুসিওবি আপনি যেগুলি চান তা ব্যবহার করতে পারেন এবং কলামগুলিও ব্যবহার করতে পারেন (উদাহরণস্বরূপ <col class="col-md-4 col-sm-6">মাঝারি পর্দার আকারে 33% এবং ছোট পর্দার আকারে 50% প্রস্থ থাকবে)

— ভিডিআরিকাউ

কলগ্রুপ ক্রোমে কাজ করছে না। (বুটস্ট্র্যাপ ভি 4.1)। ব্রাউজারগুলিতে অভিন্নতার জন্য, <td> উপাদানগুলির জন্য% প্রস্থ ব্যবহার করুন।

— অঙ্কিত

Answer 4

আশা করি এটি একজনকে সহায়তা করবে:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863

Comments

ব্যবহারের সহজ উত্তর

— গ্যাভিনবেলসন

Answer 5

আপনি যদি <table class="table">আপনার টেবিলটিতে ব্যবহার করেন তবে বুটস্ট্র্যাপের টেবিল বর্গটি টেবিলে 100% প্রস্থ যুক্ত করে। আপনাকে প্রস্থটি অটোতে পরিবর্তন করতে হবে।

এছাড়াও, যদি আপনার টেবিলের প্রথম সারিটি শিরোনাম সারি হয় তবে আপনার প্রস্থটি টিডি না দিয়ে যুক্ত করতে হবে।

Comments

বুটস্ট্র্যাপ 3-এ সংযোজন হিসাবে আপনাকে বর্তমানে সাদা-স্পেস সম্পত্তিটি thস্বাভাবিক হিসাবে সেট করতে হবে যেহেতু বর্তমানে এটির্যাপ হওয়ায় এই জাতীয় শিরোনামগুলি ভাঙ্গবে না।

— সাম্ময়ে

Answer 6

আমার ক্ষেত্রে আমি সেলগুলি বা এর min-width: 100pxপরিবর্তে ব্যবহার করে সমস্যাটি সমাধান করতে সক্ষম হয়েছি ।width: 100pxthtd

.table td, .table th {
    min-width: 100px;
}

Comments

এটি আমার বোধগম্য জিনিসটি রক্ষা করেছে।

— জোয়েল

হ্যাঁ! এই সেটগুলি, ভাল, একটি প্রতিক্রিয়াশীল টেবিলের কলামের জন্য ন্যূনতম প্রস্থ। ধন্যবাদ।

— ও জোনস

এই উত্তর প্রশ্নের চেয়ে ভাল কাজ করেছে, ধন্যবাদ!

— ইস্রায়েল

Answer 7

বুটস্ট্র্যাপ 4 এর জন্য, আপনি কেবল ক্লাস সহায়ক ব্যবহার করতে পারেন:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

Comments

এটি আমার ব্যবহারের ক্ষেত্রে উপযুক্ত। ধন্যবাদ!

— টনি আজ

একমাত্র ডাব্লু- * অপশনগুলি হ'ল গুরুত্বপূর্ণ: .w-25, .w-50, .w-75, .w-100, .w-autoতবে আপনি যদি অন্য কিছু চান তবে বলুন, w-10আপনাকে .w-10 { width: 10% !important; }আপনার স্থানীয় সিএসএস ফাইল যুক্ত করতে হবে।

— আবেলা

Answer 8

এটা চেষ্টা কর -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

Comments

এটিই কেবলমাত্র অন্য সমস্ত উত্তর থেকে কাজ করে।

— 0bserver07

text-overflow: ellipsisকাট-অফ পাঠ্যটি দৃশ্যমান কিনা তা নিশ্চিত করার জন্য আমি যোগ করেছি

— সপ্তাহে দেবদেব

@ অবজারভার

— 07

Answer 9

বুটস্ট্র্যাপ 4.0

বুটস্ট্র্যাপ 4.0.০-তে, আমাদের ক্লাব ডি-ফ্লেক্স যুক্ত করে টেবিলের সারিগুলি ফ্লেক্স-বক্স হিসাবে ঘোষণা করতে হবে এবং বুটস্ট্র্যাপটি ভিউপোর্ট থেকে এটি স্বয়ংক্রিয়ভাবে প্রাপ্ত করার জন্য এক্স, এমডি, প্রত্যয়ও ফেলে দিতে হবে।

সুতরাং এটি নিম্নলিখিত দেখতে হবে:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

আশা করি এটি অন্য কারও জন্য সহায়ক হবে!

চিয়ার্স!

Answer 10

এই সম্মিলিত সমাধানটি আমার পক্ষে কাজ করেছিল, আমি সমান প্রস্থের কলাম চাইছিলাম

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

ফলাফল :-

Answer 11

ঠিক আছে, আমি ঠিক বুঝতে পেরেছিলাম কোথায় সমস্যা ছিল - বুটস্ট্র্যাপে উপাদানটির widthজন্য একটি ডিফল্ট মান হিসাবে সেট আপ করা selectহয়, সুতরাং, সমাধানটি হ'ল:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

অন্য কিছু আমার কাজ করে না।

Answer 12

পৃষ্ঠার এইচটিএমএল বা আপনার সিএসএসের বাকী প্রসঙ্গ ছাড়াই বিচার করা শক্ত। আপনার সিএসএস বিধি টিডি উপাদানকে প্রভাবিত করছে না এমন এক জিলিয়ন কারণ থাকতে পারে।

আপনি যেমন আরও নির্দিষ্ট সিএসএস নির্বাচক চেষ্টা করেছেন

tr.somethingontrlevel td.something {
  width: 90px;
}

আপনার সিএসএস বুটস্ট্র্যাপ সিএসএস থেকে আরও নির্দিষ্ট নিয়মের দ্বারা ওভাররাইড হওয়া এড়ানোর জন্য।

(যাইহোক, শৈলীর বৈশিষ্ট্যের সাথে আপনার ইনলাইন সিএসএস নমুনায় আপনি প্রস্থকে ভুল বানান দিয়েছেন - এটি ব্যাখ্যা করতে পারে যে কেন চেষ্টা ব্যর্থ হয়েছে!)

Answer 13

আমি কিছুক্ষন ধরে ইস্যুটির সাথে লড়াই করে যাচ্ছি, তাই যখন কেউ আমার মতো একই বোকা ভুল করে ... তবে <td>আমার ভিতরে উপাদানটি white-space:preস্টাইল প্রয়োগ করা ছিল। এটি আমার সমস্ত টেবিল / টিআর / টিডি কৌশলগুলি বাতিল করে দিয়েছে। আমি যখন যে শৈলী মুছে, হঠাৎ আমার সমস্ত টেক্সট চমত্কারভাবে ভিতরে ফরম্যাট ছিল td।

সুতরাং, সর্বদা মূল ধারকটি পরীক্ষা করুন (যেমন tableবা td) তবে আপনি সর্বদা আপনার বিউটিফুল কোডটি আরও গভীরভাবে বাতিল করেন না কিনা তা সর্বদা পরীক্ষা করুন :)

Answer 14

বুটস্ট্র্যাপ 4 এ "টিআর" এর জন্য সারিটির পরিবর্তে ডি-ফ্লেক্স ব্যবহার করুন

জিনিসটি হ'ল "সারি" শ্রেণীটি আরও প্রস্থ নেয় তারপরে মূল পাত্রে, যা সমস্যাগুলি প্রবর্তন করে।

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

Comments

আমি "ট্র" এর পরিবর্তে "সারি" বোঝাতে চাইছি। সারি ক্লাসটি উভয় প্রান্তে জলের সাথে আসে। অথবা আপনি যদি "সারি" শ্রেণিটি ব্যবহার করতে না চান তবে কেবল "নো-গটারস" শ্রেণি যুক্ত করুন।

— উসমান আনোয়ার

Answer 15

বুটস্টार्প 4 এ আপনি ব্যবহার করতে পারেন rowএবং col-*টেবিলে, আমি এটি নীচের মত ব্যবহার করি

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

Answer 16

আমি যখন আইইয়ের সাথে ডিল করতে না পারি তখন প্রায়শই আমি এইভাবে করি

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

এইভাবে আপনার পরিচিত 12-করল গ্রিড থাকতে পারে।

Answer 17

আমার জন্য এই কোনওটিই কাজ করে না, এবং% বা এসএম ক্লাসটি বুটস্ট্র্যাপে 12 টি উপাদান বিন্যাসের সমান করতে ডেটাটেবলে অনেকগুলি কলস রয়েছে।

আমি ডাটাবেবলস অ্যাঙ্গুলার 5 এবং বুটস্ট্র্যাপ 4 এর সাথে কাজ করছিলাম এবং টেবিলে অনেকগুলি কলস রয়েছে। আমার জন্য সমাধানটি ছিল একটি নির্দিষ্ট প্রস্থ সহ একটি উপাদান THযুক্ত করা DIV। উদাহরণস্বরূপ কলস "ব্যক্তির নাম" এবং "ইভেন্টের তারিখ" এর জন্য আমার একটি নির্দিষ্ট প্রস্থ প্রয়োজন, তারপরে একটি divকর্নার শিরোনামে রাখুন, পুরো কলের প্রস্থটি তারপরে ডিভ থেকে নির্দিষ্ট প্রস্থকে আকার দেয় TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

Answer 18

ব্যবহার .something ছাড়া TD বা ম

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Answer 19

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>

Comments

কিছু ব্যাখ্যাও যুক্ত করুন।

— আকাশ দুবে

এই উত্তরটি সবচেয়ে বিভ্রান্তিকর। ক্লাসগুলি অদ্ভুত, অপ্রয়োজনীয় আইডি, কোনও ব্যাখ্যা নেই।

— গট ব্যাটারি