সারণীর কলামের প্রস্থকে ধীরে ধীরে তার ঘরে পাঠ্যের পরিমাণ নির্বিশেষে সেট করুন?

Question

আমার সারণীতে আমি একটি কলামে প্রথম কক্ষের প্রস্থ নির্ধারণ করেছি 100px।
যাইহোক, এই কলামের কোনও একক ঘরে পাঠ্য দীর্ঘ হলে কলামটির প্রস্থের চেয়ে বেশি হয়ে যায় 100px। আমি কীভাবে এই সম্প্রসারণটি অক্ষম করতে পারি?

Comments

stackoverflow.com/questions/1258416/word-wrap-in-a-html-table ডান দিক যথাসাধ্য সাহায্যের বিন্দু আপনি

— justinl

আমার ক্ষেত্রে প্রসারণ ঘটেনি, তবে বিপরীত: আমার স্পষ্ট প্রস্থের ঘোষণা সত্ত্বেও প্রস্থের অযাচিত সঙ্কুচিত হওয়া। হাস্যকর!

— সিএসবা তোথ

এর একমাত্র সঠিক সমাধান হ'ল এটিতে কলসের সাহায্যে কলগ্রুপ ব্যবহার করা এবং কলসের প্রস্থ নির্ধারণ করা।

— মাইটিপোর্ক

table-layout:fixed;সমাধানটি

— এমফি

Answer 1

আমি এটির সাথে কিছুটা খেলেছি কারণ এটি বের করতে আমার সমস্যা হয়েছিল।

আপনি কক্ষে প্রস্থ সেট করতে হবে (হয় thবা tdকাজ, আমি উভয় সেট) এবং সেট table-layoutকরার fixed। কোনও কারণে, সারণীর প্রস্থটি কেবলমাত্র টেবিলের প্রস্থ সেট করা থাকলে স্থির থাকতে পারে বলে মনে হয় (আমি এটি নির্বোধ তবে whetv মনে করি)।

এছাড়াও, কোনও অতিরিক্ত পাঠ্য টেবিল থেকে বেরিয়ে আসার জন্য overflowসম্পত্তি সেট করে রাখা দরকারী hidden।

আপনারা অবশ্যই সিএসএসের জন্য সমস্ত বর্ডারিং এবং সাইজিং ছেড়ে যাওয়ার বিষয়ে নিশ্চিত হওয়া উচিত।

ঠিক আছে তাই এখানে আমার কি আছে:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

এখানে এটি জেএসফিডেলে

এই লোকটির একই সমস্যা ছিল: টেবিলের কক্ষের প্রস্থ - প্রস্থ স্থির করা, মোড়ানো / দীর্ঘ শব্দ ছাঁটাই করা

Comments

তার এই লক্ষ্য করা গুরুত্বপূর্ণ: থেকে "ব্রাউজার তারপর টেবিলের প্রথম সারিতে কোষ প্রস্থ উপর ভিত্তি করে কলাম প্রস্থ সেট হবে", stackoverflow.com/questions/570154/...

— daniloquio

টেবিলের প্রস্থ নির্ধারিত না হলে এটি কাজ করে। jsfiddle.net/lavinski/CGCFW/3 অবশিষ্ট স্থানটি নিতে আপনার কেবল একটি গতিশীল সারি দরকার।

— ড্যানিয়েল লিটল

@ ড্যানিয়েলিটল বিকল্পভাবে আপনি টেবিলের প্রস্থকে 1px এ সেট করতে পারেন; overflow: visibleগতিশীল আকারের টেবিলগুলির সাথে , যতক্ষণ না কোষগুলির আকার স্থির থাকে এবং ওভারফ্লো দৃশ্যমান হয় কেবল টেবিলের আকারটি প্রকৃত কোষের চেয়ে বড় বা ছোট কিনা তা বিবেচ্য নয়।

— মাহন

আপনার টিডির "প্রস্থ = 30%;" থাকলে আপনি কী করতে পারেন?

— 71GA

ওভারফ্লো যুক্ত করুন: লুকানো @ রোকসি.বুলজান

— অ্যালেক্স গ্র্যান্ডে

Answer 2

দেখুন: http://www.html5-tutorials.org/tables/changing-column-width/

টেবিল ট্যাগ পরে, করল উপাদান ব্যবহার করুন। আপনার একটি ক্লোজিং ট্যাগ লাগবে না।

উদাহরণস্বরূপ, আপনার যদি তিনটি কলাম থাকে:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

Comments

এই! এটি এইচটিএমএল 5 এর উত্তর এবং এটি আমার বোকা হুপগুলি ছাড়াই লাফিয়ে কাজ করে fre এছাড়াও আপনি আপনার প্রস্থগুলিকে সিএসএসে রাখতে এবং স্টাইলের তথ্যের সাহায্যে আপনার এইচটিএমএলকে দূষিত না করার পরিবর্তে <কল ক্লাস = "কিছু ক্লাসনাম"> ব্যবহার করতে পারেন।

— জন মুনসচ

@ সাম আপনার নিজের মতামত যেমন সিএসএস, ইনলাইন শৈলী বা ভুল ডক্টিপ ইত্যাদিকে ওভাররাইড করে অন্য কোনও সমস্যা থাকতে পারে column এটি অবশ্যই কলাম স্টাইলগুলি সেট করার আদর্শ উপায় works

— সমীর আলিভাই

আমি নিশ্চিত নই যে এটি আদৌ 'এইচটিএমএল 5 উপায়' কিনা। এটি প্রদর্শিত হয় যে এইচটিএমএল 5 এ কলগ্রুপ / কল কেবলমাত্র স্প্যান চিহ্নিত করার জন্য ব্যবহৃত হয়। এমডিএন কোল ট্যাগগুলিতে স্টাইল অ্যাট্রিবিউট ব্যবহারের বিষয়ে কোনও উল্লেখ করে না (এটি বৈশ্বিক বৈশিষ্ট্য থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়) এবং কেবল বিজিকলার সম্পর্কে বলে: "... সম্পর্কিত <td> উপাদানগুলিতে সিএসএস সম্পত্তি ব্যবহার করুন ..." বিকাশকারী.মোজিলা.অর্গ.ইন- ইউএস / ডকস / ওয়েব / এইচটিএমএল / এলিমেট / কোল ।

— স্টিফেন পাঞ্জার

আমার জন্য টেবিল শৈলীতে কাজ করেছেন table-layout: fixed; width: 100%;। ধন্যবাদ!

— নড়ডিক

এটি সর্বশেষ / চূড়ান্ত নয়, তবে ডাব্লু 3 স্কুলগুলিও এর ব্যবহারের কথা উল্লেখ করে না col। এটি একটি <td>(বা a <th>) - w3schools.com/tags/att_td_width.asp

— ডন

Answer 3

কেবল <div>ভিতরে ট্যাগ যুক্ত করুন <td>বা <th>প্রস্থের ভিতরে সংজ্ঞা দিন <div>। এটি আপনাকে সাহায্য করবে। অন্য কিছু কাজ করে না।

যেমন।

<td><div style="width: 50px" >...............</div></td>

Comments

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

— সিএসবা টথ

কিভাবে এই যে একই CSS সেটিং বেশী ভালো অনিশ্চিত style="width: 50px"উপর<td>

— ডন জন্য Cheadle

@ মিমক্রাই এটির চেয়ে ভাল কারণ এটি কাজ করে, প্রস্থের উপর সেট <td>করে না।

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

Answer 4

অন্য কলামগুলির আকার পরিবর্তন করার সময় আপনার যদি আরও আকরিক আরও স্থির-প্রস্থের কলামগুলির প্রয়োজন হয় তবে উভয় min-widthএবং max-widthএকই মানকে সেট করার চেষ্টা করুন ।

Comments

প্রস্থটি স্পষ্টভাবে table-layout: fixed;না দিয়ে সেট করার সময় এটি আমার পক্ষে কাজ করেছিল।

— জর্দান ম্যাক

পবিত্র ছি! অন্য সমাধানগুলির কোনওটিই কাজ করে না বা খুব চতুর ছিল না! এটি নিখুঁতভাবে কাজ করেছে! কোন ডিভ প্রয়োজন!

— নিলরয়

Answer 5

আপনার এটি সংশ্লিষ্ট সিএসএসের ভিতরে লিখতে হবে

table-layout:fixed;

Comments

— ডিভ

আমি যখন কলামের গোষ্ঠীগুলির সাথে এটি একত্রিত করেছি তখন আমার জন্য কাজ করেছিল: <টেবিল শৈলী = "টেবিল-বিন্যাস: স্থির"> <colgroup> <কল শৈলী = "প্রস্থ: 50%"> <কল শৈলী = "প্রস্থ: 50%"> </ colgroup> <tbody> ... </ tbody> </ টেবিল>।

— রাশ ব্যাটম্যান

এই ক্রিস কোয়ার নিবন্ধটি এটি ভালভাবে ব্যাখ্যা করেছে: css-tricks.com/fixing-tables-long-strings

— cssyphus

Answer 6

আমি যা করি তা হ'ল:

1. টিডি প্রস্থ সেট করুন:

   <td width="200" height="50"><!--blaBlaBla Contents here--></td>

2. সিডিএস সহ টিডি প্রস্থ সেট করুন:

   <td style="width:200px; height:50px;">

3. সিএসএসের সাথে আবার প্রস্থটি সর্বোচ্চ এবং মিনিট হিসাবে সেট করুন:

   <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

এটি কিছুটা পুনরাবৃত্তি মনে হয় তবে এটি আমাকে পছন্দসই ফলাফল দেয়। এটিকে খুব সহজেই অর্জন করতে আপনার স্টাইল শিটের একটি শ্রেণিতে সিএসএসের মানগুলি লাগাতে হতে পারে:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

তারপর:

<td class="td_size">

আপনি যে কোনওটির জন্য শ্রেণীর বৈশিষ্ট্য রাখুন <td>।

Comments

এটিই কেবলমাত্র একমাত্র সমাধান যা অতিরিক্ত, সম্ভাব্য-অবাঞ্ছিত বিধিনিষেধ আরোপ না করে সব ক্ষেত্রেই কাজ করে বলে মনে হয়েছিল।

— স্যাম

Answer 7

আমি এই ব্যবহার

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Comments

এনটিচ-চাইল্ড (2) (বা 3, 4 এবং আরও) ভুলে যাবেন না

টেবিল টিডি নবম-সন্তানের (n + 1) {... প্রথম কলাম

— এড র‌্যান্ডাল

Answer 8

আপনি যদি কোনও স্থির বিন্যাস না চান তবে কলামটি যথাযথ আকারের জন্য শ্রেণি নির্ধারণ করুন।

সিএসএস:

.special_column { width: 120px; }

এইচটিএমএল:

<td class="special_column">...</td>

Answer 9

এটি প্রস্থ: স্বয়ং সহ সর্বশেষ "ফিলার সেল" স্থাপন করতে সহায়তা করে । এটি অবশিষ্ট স্থান দখল করবে এবং নির্দিষ্ট হিসাবে অন্যান্য সমস্ত মাত্রা ছেড়ে যাবে।

Answer 10

নির্দিষ্ট প্রস্থের চেয়ে ছোট হলে ছোট পর্দার জন্য গৃহীত উত্তরটি প্রতিক্রিয়া তৈরি করুন।

এইচটিএমএল:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

সিএসএস

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

জেএস ফিডল

https://jsfiddle.net/w9s3ebzt/

Answer 11

এটি সেট করা হচ্ছে:

style="min-width:100px;" 

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

Answer 12

কে আসুনের সঠিক ধারণা আছে। এখানে সঠিক কোডটি ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

Answer 13

আমার উত্তর অনুযায়ী এখানে , এটি একটি ব্যবহার করা সম্ভব টেবিল মাথা (যা ফাঁকা হতে পারে) এবং প্রতিটি টেবিলের মাথা কক্ষের জন্য আপেক্ষিক প্রস্থ আবেদন। টেবিলের শরীরে সমস্ত কক্ষের প্রস্থগুলি তাদের কলামের মাথাগুলির প্রস্থের সাথে সামঞ্জস্য করবে। উদাহরণ:

এইচটিএমএল

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

সিএসএস

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

ফলাফল দেখুন

বিকল্পভাবে, colgroupহায়াথিনের উত্তরে প্রস্তাবিত হিসাবে ব্যবহার করুন ।

Answer 14

আমি ঘরে একটি উপাদান পরে একটি ব্যবহার করি যেখানে আমি উপস্থিত পাঠ্য নির্বিশেষে ন্যূনতম প্রস্থ নির্ধারণ করতে চাই:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

আমাকে টেবিল প্যারেন্টে প্রস্থ স্থাপন করতে হবে না বা টেবিল-বিন্যাস ব্যবহার করতে হবে না।

Answer 15

আমি দেখেছি Kasun এর উত্তর ব্যবহার করে আরো ভালভাবে কাজ করে VW পরিবর্তে px আকারে যেমন:

<td><div style="width: 10vw" >...............</div></td>

কলামের প্রস্থ সামঞ্জস্য করার জন্য এটি আমার কেবল স্টাইলিং ছিল

Answer 16

আপনাকে সেট করার দরকার নেই "fixed"- overflow:hiddenকলামের প্রস্থ সেট হওয়ার পরে আপনার যা দরকার তা হ'ল সেট করে।

Comments

যা কোষের সীমানার পিছনে থাকা সামগ্রীগুলি আড়াল করবে, কোনও ভাল ধারণা নয়।

— mystrdat