আমি কীভাবে শেষ কলামটি বাদ দিয়ে সর্বনিম্ন টেবিল ঘর প্রস্থকে সেট করব?

Question

আমার 100% প্রস্থ সহ একটি টেবিল রয়েছে। যদি আমি <td>এটিতে রাখি তবে সেগুলি সমান দৈর্ঘ্যের কলামগুলির সাথে ছড়িয়ে পড়ে। যাইহোক, আমি চাই শেষটি ব্যতীত সমস্ত কলামগুলি পাঠ্য মোড়ানো ছাড়াই যথাসম্ভব প্রস্থের মতো ছোট হওয়া উচিত।

আমি প্রথমে যা করেছি তা হ'ল আমি শেষের ব্যতীত width="1px"সকল ক্ষেত্রে সেট করেছিলাম <td>(যদিও হ্রাস করা হয়েছে, তবে এর style="width:1px"কোনও প্রভাব নেই), যা কলামে মাল্টি-ওয়ার্ড ডেটা না পাওয়া পর্যন্ত ঠিক কাজ করেছিল। সেক্ষেত্রে দৈর্ঘ্য যতটা সম্ভব ছোট রাখতে, এটি আমার পাঠ্যটি মোড়ল।

আমাকে প্রদর্শন করুন। এই টেবিলটি কল্পনা করুন:

---------------------------------------------------------------------------------
element1 | data      | junk here   | last column
---------------------------------------------------------------------------------
elem     | more data | other stuff | again, last column
---------------------------------------------------------------------------------
more     | of        | these       | rows
---------------------------------------------------------------------------------

আমি যা চেষ্টা করি না কেন, আমি যা পাচ্ছি তা হ'ল হয়:

---------------------------------------------------------------------------------
element1         | data             | junk here        | last column
---------------------------------------------------------------------------------
elem             | more data        | other stuff      | again, last column
---------------------------------------------------------------------------------
more             | of               | these            | rows
---------------------------------------------------------------------------------

বা (যদিও আমি সেট করেছি style="whitespace-wrap:nowrap"):

---------------------------------------------------------------------------------
         |      | junk  | last
element1 | data |       | 
         |      | here  | column
---------------------------------------------------------------------------------
         | more | other | again,
elem     |      |       | last
         | data | stuff | column
---------------------------------------------------------------------------------
more     | of   | these | rows
---------------------------------------------------------------------------------

আমি প্রথম উপস্থাপন করা টেবিলটি পেতে চাই। আমি কীভাবে এটি অর্জন করব? (আমি বরং স্ট্যান্ডার্ডের সাথে লেগে থাকি এবং সিএসএস ব্যবহার করি IE

আরও ব্যাখ্যা: আমার যা প্রয়োজন তা হ'ল শব্দগুলি মোড়ানো ছাড়াই কলামগুলি যত তাড়াতাড়ি সংক্ষিপ্ত করে রাখা (শেষ কলামটি যতটা বড় হওয়া উচিত এটি টেবিলের প্রস্থটি আসলে 100% এ পৌঁছানোর প্রয়োজন)। আপনি যদি লটেক্সকে জানেন তবে আমি চাই কী আপনি যখন ল্যাডেক্সের প্রস্থটি 100% এ সেট করেন তখন কীভাবে টেবিলগুলি প্রাকৃতিকভাবে উপস্থিত হয়।

নোট: আমি দেখেছি এই কিন্তু এটি এখনও আমাকে গত টেবিল হিসাবে একই দেয়।

Comments

স্পষ্টতই তাই! একটি বিব্রতকর এক, প্রদত্ত যে আমি কেবল CSS ফিল্ডটি ভুলভাবে পড়েছি।

— শাহবাজ

Answer 1

whitespace-wrap: nowrapবৈধ CSS নয়। এটি white-space: nowrapআপনি খুঁজছেন।

Answer 2

এটি কমপক্ষে গুগল ক্রোমে কাজ করে। ( জেএসফিডাল )

table {
  border: 1px solid green;
  border-collapse: collapse;
  width: 100%;
}

table td {
  border: 1px solid green;
}

table td.shrink {
  white-space: nowrap
}

table td.expand {
  width: 99%
}

<table>
  <tr>
    <td class="shrink">element1</td>
    <td class="shrink">data</td>
    <td class="shrink">junk here</td>
    <td class="expand">last column</td>
  </tr>
  <tr>
    <td class="shrink">elem</td>
    <td class="shrink">more data</td>
    <td class="shrink">other stuff</td>
    <td class="expand">again, last column</td>
  </tr>
  <tr>
    <td class="shrink">more</td>
    <td class="shrink">of </td>
    <td class="shrink">these</td>
    <td class="expand">rows</td>
  </tr>
</table>

Comments

আমার

— দিনটিও

আমার widthএকাধিক প্রশস্ত কলাম রয়েছে বলে আমার প্রয়োজনের জন্য আমার দৃষ্টিভঙ্গিটি ফ্লিপ করতে হয়েছিল (উপরের সমাধানটি আরও ভালভাবে কাজ করার জন্য নয়) wide আমি মুছে width: 99%থেকে expandযোগ width: 1%করতে shrinkএবং এই সমাধান আমার জন্য ভাল কাজ!

— ক্যাম্পবেলনে

বাহ! আপনি যদি ক্লাসের সাথে সমস্ত কিছু ট্যাগ করার পরিবর্তে একই কলামটি প্রসারিত করতে চান, তবে আমি এটি করেছি: td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}- যদি কোনও newbies এড়িয়ে যায়। :)

— এলিজাওয়াই

@ElizaWy এই উত্তর ( stackoverflow.com/questions/9623601/... ) আমি একটি jQuery স্ক্রিপ্ট সৃষ্টি করেছেন, যাতে আপনাকে কপি col'র classজন্য বৈশিষ্ট্যাবলী' মান সংশ্লিষ্ট টেবিল tdগুলি

— yunzen

Answer 3

td:not(:last-child){
    white-space: nowrap;
}

td:last-child{
    width: 100%;
}

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

Comments

সরলতা পছন্দ।

— জুয়ানমার্কস

কমপক্ষে IE11 (প্রান্ত মোডে) এফওয়াইআই, width: 1px;ন্যূনতম প্রস্থের সাথে রেন্ডার করার জন্য নন-শেষ কলামগুলি পেতে নন-শেষ শিশু শৈলীতে যুক্ত করতে হবে to

— eh

পরিষ্কারভাবে এই পৃষ্ঠায় পরিষ্কার সমাধান! 👍

— BoD

Answer 4

কিছুটা আলাদা বিষয় তবে সম্ভবত এটি আমার মতো এই প্রশ্নটিতে হোঁচট খায় এমন কাউকে সহায়তা করে।
_{(আমি কেবল ক্যাম্পবেলনের মন্তব্যটি দেখেছি যিনি নীচে আমার উত্তর লেখার পরে ঠিক এই পরামর্শ দেয়, তাই এটি মূলত তার মন্তব্যের বিশদ ব্যাখ্যা)}

আমার চারপাশে অন্যভাবে সমস্যা ছিল: আমি একটি স্পেস টেবিল কলামটি নূন্যতম প্রস্থে সাদা স্পেসে না ভাঙ্গিয়ে সেট করতে চেয়েছি (নিম্নলিখিত উদাহরণের শেষ কলাম) তবে অন্যটির প্রস্থটি গতিশীল হওয়া উচিত (লাইন ব্রেক সহ):

-----------------------------------------------------------------------------------
element1 | data      | junk here which can   | last column, minimum width, one line
                       span multiple lines
-----------------------------------------------------------------------------------
elem     | more data | other stuff           | again, last column
-----------------------------------------------------------------------------------
more     | of        | these                 | rows
-----------------------------------------------------------------------------------

সহজ সমাধান:

এইচটিএমএল

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

সিএসএস

td.shrink {
  white-space: nowrap;
  width: 1px;
}

শ্রেণি সহ কলামগুলি shrinkকেবল সর্বনিম্ন প্রস্থে প্রসারিত হয় তবে অন্যরা গতিশীল থাকে। কারণ এই কাজ widthএর tdস্বয়ংক্রিয়ভাবে পুরো বিষয়বস্তু মাপসই প্রসারিত করা হয়।

স্নিপেট উদাহরণ

table {
  width: 100%;
}

td {
  padding: 10px;
}

td.shrink {
  white-space: nowrap;
  width: 1px;
}

<table>
  <tr>
    <td>element1</td>
    <td>data</td>
    <td>junk here which can span multiple lines</td>
    <td class="shrink">last column, minimum width, one line</td>
  </tr>
  <tr>
    <td>elem</td>
    <td>more data</td>
    <td>other stuff</td>
    <td class="shrink">again, last column</td>
  </tr>
  <tr>
    <td>more</td>
    <td>of</td>
    <td>these</td>
    <td class="shrink">rows</td>
  </tr>
</table>

Answer 5

আপনি divভিতরে ভিতরে ট্যাগ রেখে প্রস্থ নির্ধারণ করতে পারেনtd

table {
    border: 1px solid green;
    border-collapse: collapse;
    width:100%;
}

table td {
    border: 1px solid green;
}

table td:nth-child(1) {
  width: 1%;
}

table td:nth-child(1) div {
  width: 300px;
}

<table>
    <tr>
        <td><div>element1 element1 element1 element1 element1 element1 </div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element2</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
    <tr>
        <td><div>element3</div></td>
        <td>data</td>
        <td>junk here</td>
        <td>last column</td>
    </tr>
</table>

https://jsfiddle.net/8bf17o1v/

Answer 6

আপনার যদি টেবিল ঘরে একাধিক পাঠ্য লাইন প্রয়োজন।

ব্যবহার করবেন না white-space: nowrapব্যবহার white-space: pre;পরিবর্তে।

সারণী কক্ষে নতুন লাইন এবং ইন্ডেনশন (সাদা স্থান) এর মতো কোনও কোড বিন্যাস এড়ান এবং <br>একটি নতুন পাঠ্য লাইন / সারি সেট করতে ব্যবহার করুন । এটার মত:

<td>element1<br><strong>second row</strong></td>

কোডপেনে ডেমো

Answer 7

পারেন একটি সংমিশ্রণ white-space: nowrapবা white-space: preসঙ্গে min-width: <size>কাজ করতে হবে। width: <size>নিজে থেকে টেবিলকে চেঁচানো থেকে ধরে রাখা যথেষ্ট নয়।