সিএসএস: টেবিলের ঘরগুলি কাটা, তবে যথাসম্ভব ফিট

Question

ফ্রেডের সাথে দেখা করুন। তিনি একটি টেবিল:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

ফ্রেডের অ্যাপার্টমেন্টে আকার পরিবর্তন করার একটি উদ্ভট অভ্যাস রয়েছে, তাই তিনি অন্যান্য কিছু ইউনিটকে ধাক্কা না দেওয়ার জন্য এবং মিসেস হুইটফোর্ডের বসার ঘরটিকে বিস্মৃত না করে দেওয়ার জন্য তাঁর কিছু সামগ্রী লুকিয়ে রাখতে শিখেছিলেন:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

এটি কাজ করে, তবে ফ্রেডের মনে মনে এই অনুভূতি রয়েছে যে যদি তার ডান সেলটি (যার নাম তিনি সেলদিটো নামে পরিচিত) কিছুটা জায়গা ছেড়ে দেন তবে তার বাম ঘরটি বেশিরভাগ সময় কেটে যাবে না। আপনি কি তার সন্তুষ্টি বাঁচাতে পারেন?

---

সংক্ষিপ্তসার: কীভাবে কোনও টেবিলের ঘরগুলি সমানভাবে উপচে পড়তে পারে এবং কেবল যখন তারা সমস্ত তাদের সমস্ত সাদা অংশ ছেড়ে দেয়?

Comments

+1 ভার্চুয়াল অবজেক্টের বৈশিষ্ট্যের জন্য, সুন্দরভাবে একজন স্যার :)

— মাইলেস গ্রে

আমি সন্দেহ করি এটি সমাধান করতে আপনাকে জাভাস্ক্রিপ্টের অবলম্বন করতে হবে।

— ত্রিশডট

ললজ .. বিনোদন মানের জন্য +1 :) ... এটি কি গতিশীল হওয়ার দরকার বা আপনি প্রতিটি কলামে কেবল একটি প্রস্থ নির্ধারণ করতে পারবেন না?

— যুদ্ধ

Answer 1

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

Comments

বিতৃষ্ণা। এত দুর্দান্ত কাজ করে, তবে কেন জানি না, যা আমাকে নার্ভাস করে তোলে: আমার

— শন রোয়ান

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

— স্যাম

এছাড়াও, নোট করুন যে <col>পরিবর্তে <td>শৈলীতে প্রস্থগুলি প্রিডেন্ট করে আপনি এসগুলি মুছে ফেলতে পারেন

— স্যাম

প্রকৃতপক্ষে, এটি অ-ছাঁটাই করা কলামগুলির গতিশীল কলামের আকারকে নষ্ট করছে। এগুলি সর্বদা সর্বনিম্ন প্রস্থে সঙ্কুচিত বলে মনে হয়।

— স্যাম

Answer 2

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

বৈশিষ্ট্য :

• জাভাস্ক্রিপ্ট নেই
• কোনও স্থির-বিন্যাস নেই
• কোনও ওজন বা শতাংশ-প্রস্থের কৌশল নয়
• যে কোনও কলামের সাথে কাজ করে
• সাধারণ সার্ভার-সাইড জেনারেশন এবং ক্লায়েন্ট-সাইড আপডেটিং (কোনও গণনার প্রয়োজন নেই)
• ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ

এটি কীভাবে কাজ করে : টেবিলের ঘরের ভিতরে অপেক্ষাকৃত অবস্থানযুক্ত ধারক উপাদানের মধ্যে দুটি ভিন্ন উপাদানের সামগ্রীতে দুটি কপি রাখুন। স্পেসার উপাদানটি স্ট্যাটিক্যালি-অবস্থানযুক্ত এবং এটি সারণী কোষগুলির প্রস্থকে প্রভাবিত করবে। স্পেসার সেলটির বিষয়বস্তুগুলিকে মোড়কে দেওয়ার অনুমতি দিয়ে আমরা যে সারণী ঘরগুলি সন্ধান করছি তার "সেরা-ফিট" প্রস্থ পেতে পারি। এটি আমাদের তুলনামূলকভাবে অবস্থানযুক্ত পিতামাতার সাথে দৃশ্যমান সামগ্রীর প্রস্থকে সীমাবদ্ধ করতে একেবারে অবস্থানযুক্ত উপাদানটি ব্যবহার করার অনুমতি দেয়।

পরীক্ষিত এবং এতে কাজ করছে: আইই 8, আইই 9, আইই 10, ক্রোম, ফায়ারফক্স, সাফারি, অপেরা

ফলাফল চিত্রসমূহ :

জেএসফিডাল : http://jsfiddle.net/zAeA2/

নমুনা এইচটিএমএল / সিএসএস :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Comments

আপনার সামগ্রীটি যদি ফাঁকা জায়গা ছাড়াই খুব দীর্ঘ শব্দ হয় তবে এটি কাজ করছে না তবে আপনাকে কেবল & লাজুকের সাথে স্পেসারের কনটেন্টে হাইফেনেশন যুক্ত করতে হবে; jsfiddle.net/zAeA2/160

— রিকার্ডো ক্যাসাটা

এটি বেশ দুর্দান্ত! : আমি আমার নিজের বৈকল্পিক ATTR ব্যবহার অনুরূপ বিষয়বস্তু এড়িয়ে যাওয়া প্রণীত jsfiddle.net/coemL8rf/2

— Jayen

@ জায়েেন নিস - মাউসের উপর দিয়ে একটি টুলটিপ পাওয়ার titleপরিবর্তে সম্ভবত ব্যবহার data-spacerকরুন :)

— উইলিয়াম জর্জ

@ জয়েন, আমি কেবল আপনার চেষ্টা করেছি এবং এটি ডান পাশের কক্ষটি কাটা বলে মনে হচ্ছে না, তাই এটি সমানভাবে উপচে পড়া কোষগুলির প্রয়োজনীয়তা পূরণ করে না। আমি ক্রোম 46 ব্যবহার করছি

— স্যাম

@ সাম হ্যাঁ ঠিক আছে। আমার উদাহরণটি কেবলমাত্র দেখায় যে উভয় ধরণের ঘরই কন্টেন্টের সদৃশ ছাড়াই তৈরি করা যায়। আমি প্রশ্নের উত্তর দেওয়ার চেষ্টা করছিলাম না, কেবল অন্য একটি উপায় দেখাচ্ছে। আপনি যদি আমার উদাহরণটিতে এইচটিএমএল পরিবর্তন করেন তবে এটি আপনি যেমন চান তেমন কাজ করে।

— জয়েন

Answer 3

কিছুদিন আগেও আমি একই চ্যালেঞ্জের মুখোমুখি হয়েছি। দেখে মনে হয় লুসিফার স্যাম এর সেরা সমাধান খুঁজে পেয়েছিল ।

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

এখানে আমি স্পুডার তৈরি করতে এবং এইচটিএমএল পরিষ্কার রাখার জন্য সিউডো-এলিমেন্ট titleথেকে অ্যাট্রিবিউট অ্যাক্সেস করার প্রস্তাব করছি :after।

আইই 8 +, এফএফ, ক্রোম, সাফারি, অপেরাতে কাজ করে

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Comments

আরও সম্মতি দিতে পারিনি, উজ্জ্বল!

— মিখাইল

অন্যান্য সিএসএস সমাধানগুলির চেয়ে অনেক ভাল কারণ এটি উভয় অর্ডারে কাজ করে, অর্থাত্ যদি আরও কন্টেন্ট সেল কম কনটেন্ট সেলের পরে হয়।

— বাগডকম

Answer 4

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

বর্তমানে এটি ধরে নিয়েছে যে প্রতিটি ঘর সাধারণত সারির প্রস্থের 50% পায় এবং প্রবাহিত এড়াতে এটি বাম ঘরটি সর্বোচ্চ প্রস্থে রাখার জন্য ডান কক্ষটি ধসে পড়বে। আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে আপনি আরও অনেক জটিল প্রস্থের ভারসাম্য যুক্তির যুক্তি প্রয়োগ করতে পারেন। আশাকরি এটা সাহায্য করবে:

পরীক্ষার জন্য আমি যে সারিটি ব্যবহার করেছি তার জন্য মার্কআপ:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

জিকুয়েরি যা পুনরায় আকারের ইভেন্টটিকে সন্ধান করে:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

Answer 5

একটি আরও সহজ এবং আরও মার্জিত সমাধান আছে।

আপনি যে টেবিল-সেলটি কাটা প্রয়োগ করতে চান, তার মধ্যে কেবল CSS টেবিল-বিন্যাস সহ একটি ধারক ডিভ অন্তর্ভুক্ত করুন: স্থির। এই ধারকটি পিতামাতার সারণীর ঘরের পুরো প্রস্থ নেয়, তাই এটি প্রতিক্রিয়াশীলও করে।

সারণীতে থাকা উপাদানগুলিতে কাটছাঁটি প্রয়োগ করা নিশ্চিত করুন।

আইই 8 + থেকে কাজ করে

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

এবং সিএসএস:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

এখানে একটি কার্যরত ফিডল https://jsfiddle.net/d0xhz8tb/

Comments

অ-কাঠামোগত প্রভাব অর্জনের জন্য এই দ্রবণটির জন্য আরও 2 টি অতিরিক্ত ব্লক-স্তরের উপাদান প্রয়োজন। "প্রদর্শন: টেবিল" এ একটি টেবিল সেল সেট করা সম্ভব, যা আপনাকে ডিভগুলির একটির থেকে মুক্তি দিতে দেয়। jsfiddle.net/rza4hfcv নিশ্চিত নয়, এ সম্পর্কে আমার কী ভাবা উচিত। তবে আপনার সমাধান ভাগ করে নেওয়ার জন্য ধন্যবাদ!

— আর্মিন

আপনি কি সমাধানের সাথে কোনও সমস্যা অনুভব করেছেন? আমি এটি একটি পেশাদার সেটিংয়ে ব্যবহার করার বিষয়ে ভাবছি।

— আরমিন

@ আরমিন, আপনি যে কক্ষটি কাটাতে চান সেটিকে নকল করার চেষ্টা করুন: আপনি একের বেশি পাশাপাশি থাকতে পারবেন না।

— ড্যানিয়েল

যদিও আমি এটি চূড়ান্ত সমাধান বলব না। আপনি একটি টেবিলের প্রধান সুবিধাগুলির মধ্যে একটি আলগা করে: কলামগুলি এর বিষয়বস্তু অনুসারে আকার পরিবর্তন করে। আপনি যদি প্রতিটি কলামটি এর মতো করে সেট আপ করেন তবে সেগুলির সামগ্রীর দৈর্ঘ্য নির্বিশেষে এগুলির সমস্তটির প্রস্থ একই হবে।

— ড্যানিয়েল

@ ড্যানিয়েলএম আপনি টেবিলে আরও বাসা বেঁধে সমাধানটি প্রসারিত করতে পারেন - পুরানো টেবিল-লেআউট-দিনের মতো - তবে এখন কেবল সিএসএস দিয়ে।

— আর্মিন

Answer 6

সমস্যাটি হ'ল 'টেবিল-বিন্যাস: স্থির' যা সমানভাবে ব্যবধানযুক্ত-নির্দিষ্ট-প্রস্থের কলাম তৈরি করে। তবে এই সিএসএস-সম্পত্তিটি অক্ষম করা পাঠ্য-ওভারফ্লোটিকে মেরে ফেলবে কারণ টেবিলটি যতটা সম্ভব বিশাল হয়ে উঠবে (এবং এর চেয়ে ওভারফ্লোতে লক্ষ্য করা যায় না)।

আমি দুঃখিত তবে এই ক্ষেত্রে ফ্রেড তার কেক রাখতে পারে না এবং এটি খেতে পারে না ... যদি না বাড়িওয়ালা সেলডিতোকে প্রথম জায়গায় কাজ করার জন্য কম জায়গা না দেয়, ফ্রেড তার ব্যবহার করতে পারে না ..

Answer 7

আপনি নির্দিষ্ট কলামগুলিকে "ভার" করার চেষ্টা করতে পারেন, এটি:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

আপনি আরও কিছু আকর্ষণীয় টুইট চেষ্টা করতে পারেন, যেমন 0%-প্রস্থের কলাম এবং white-spaceসিএসএস বৈশিষ্ট্যের কিছু সংমিশ্রণ ব্যবহার করে ।

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

আপনি ধারণা পেতে।

Answer 8

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

Answer 9

স্যাম্পলবায়াস উত্তরের মতো, আবার জাভাস্ক্রিপ্ট যদি গ্রহণযোগ্য উত্তর হয় তবে আমি বিশেষভাবে এই উদ্দেশ্যে একটি jQuery প্লাগইন তৈরি করেছি: https://github.com/marcogrcr/jquery-tableoverflow

প্লাগইনটি ব্যবহার করতে কেবল টাইপ করুন

$('selector').tableoverflow();

সম্পূর্ণ উদাহরণ: http://jsfiddle.net/Cw7TD/3/ebded/result/

সম্পাদনা:

• IE সামঞ্জস্যের জন্য jsfiddle মধ্যে ঠিক করুন।
• আরও ভাল ব্রাউজারের সামঞ্জস্যের জন্য jsfiddle এ স্থির করুন (ক্রোম, ফায়ারফক্স, আই 8 +)।

Answer 10

কিছু সিএসএস হ্যাক ব্যবহার করুন, মনে হয় এটি display: table-column;উদ্ধার করতে পারে:

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

---

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

জেএসফিডাল: http://jsfiddle.net/blai/7u59asyp/

Comments

দুর্দান্ত সমাধান! ধন্যবাদ!

— ভ্যালারিউ 92

আমি একটি নমনীয় ঘরের আগে একটি স্ট্যাটিক সেল যুক্ত না হওয়া অবধি বেশ ভাল লাগছিল: jsfiddle.net/7u59asyp/5

— স্যাম

এটি কেবলমাত্র আমার জন্য কাজ করেছিল, যদিও পুরোপুরি পুরোপুরি নয়, যেহেতু আমার প্রত্যাশিত সামগ্রীর আকারের সাথে বিভিন্ন 4 কলাম রয়েছে

— ডাউনহ্যান্ড

Answer 11

এই প্রশ্নটি গুগলে শীর্ষে উঠে আসে, তাই আমার ক্ষেত্রে, আমি https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ থেকে CSS স্নিপেট ব্যবহার করেছি তবে টিডিতে এটি প্রয়োগ করা হয়নি কাঙ্ক্ষিত ফলাফল।

আমাকে টিডি-তে পাঠ্যের চারপাশে একটি ডিভ ট্যাগ যুক্ত করতে হয়েছিল এবং উপবৃত্তান্ত অবশেষে কাজ করেছিল।

সংক্ষিপ্ত এইচটিএমএল কোড;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

সংক্ষেপিত সিএসএস;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

Answer 12

কেবল আপনার নীচে নিম্নলিখিত বিধিগুলি যুক্ত করুন td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

উদাহরণ:

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

দ্রষ্টব্য: আপনি অন্য একটি কাস্টম প্রস্থ সেট করতে চান তাহলে tdব্যবহার সম্পত্তি min-width।

Comments

এটির সাথে সমস্যা হ'ল ডিফল্ট টেবিল কলামগুলি আনুপাতিকভাবে স্থান গ্রহণ করে। যদি একটি সারির লিখিত সামগ্রী অন্যটির চেয়ে দীর্ঘ হয় তবে এটি প্রস্থের বেশি বরাদ্দ করবে। যাইহোক, এই কৌশলটি সমানভাবে স্থানকে ভাগ করে দেয়। এখানে কি কাজ আছে?

— মালিক ব্রাহিমি

Answer 13

"Nowrap" কিছুটা সমস্যা সমাধান করে কিনা তা পরীক্ষা করুন। দ্রষ্টব্য: এইচটিএমএল 5 তে নওর্যাপ সমর্থিত নয়

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

Comments

white-space: nowrapnowrapবৈশিষ্ট্যের মতো একই প্রভাব রয়েছে (এবং আমি এটি উদাহরণে ব্যবহার করছি)। এটিকে এখানে যুক্ত করা যতদূর আমি বলতে পারি কিছুই পরিবর্তন করে না।

— s4y

Answer 14

আপনি ডান ঘরের প্রস্থকে ন্যূনতম প্রয়োজনীয় প্রস্থে সেট করতে পারেন, তারপরে বাম ঘরের অভ্যন্তরে ওভারফ্লো-লুকানো + পাঠ্য-ওভারফ্লো প্রয়োগ করুন, তবে ফায়ারফক্স এখানে বাগি ...

যদিও, মনে হয়, ফ্লেক্সবক্স সাহায্য করতে পারে

Answer 15

আমি সম্প্রতি এটি নিয়ে কাজ করছি। এই jsFizz পরীক্ষাটি দেখুন , আচরণটি পরীক্ষা করতে বেস টেবিলটির প্রস্থ পরিবর্তন করার চেষ্টা করুন)।

সমাধানটি অন্য একটি টেবিল এম্বেড করা হয়:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

ফ্রেড এখন সেলডিটোর প্রসার নিয়ে খুশি?

Comments

সাড়া না পাওয়ার জন্য দুঃখিত! আমি দেখতে পাচ্ছি না এটি কীভাবে একক টেবিলের থেকে আলাদাভাবে আচরণ করে। আমি যখন ক্রোম বা ফায়ারফক্সে ফ্রিডলটি দেখি, তবে প্রশ্নটি থেকে দ্বিতীয় স্ক্রিনশটের মতো দেখতে হ'ল। আমি কিছু অনুপস্থিত করছি?

— s4y

দুঃখিত, লিঙ্কটি আমি পোস্ট করি নি। এটি আসলে এই এক jsfiddle.net/VSZPV/2 । পরীক্ষার জন্য উভয় কক্ষের পাঠ্য এবং প্রধান টেবিলের প্রস্থ পরিবর্তন করুন। আশা করি আপনি যা খুঁজছেন সেখানে ...

— আইজি পাসকুয়াল

Answer 16

এটি কাউকে সহায়তা করবে কিনা জানি না, তবে আমি প্রতিটি কলামের জন্য শতাংশে নির্দিষ্ট প্রস্থের আকার নির্দিষ্ট করে একই ধরণের সমস্যার সমাধান করেছি। স্পষ্টতই, প্রতিটি কলামে প্রস্থ সহ এমন সামগ্রী থাকে যা খুব বেশি বিস্তৃত হয় না।

Answer 17

আমার একই সমস্যা ছিল, তবে আমার একাধিক লাইন প্রদর্শন করা দরকার (যেখানে text-overflow: ellipsis;ব্যর্থ হয়)। আমি এটিকে একটি এর textareaঅভ্যন্তর ব্যবহার করে সমাধান করি TDএবং তারপরে এটি কোনও টেবিল ঘরের মতো আচরণ করার জন্য স্টাইল করি।

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

Answer 18

প্রদত্ত সেই 'টেবিল-বিন্যাস: স্থির' হ'ল প্রয়োজনীয় বিন্যাসের প্রয়োজনীয়তা, এটি সমানভাবে ব্যবধানযুক্ত অ-সামঞ্জস্যযোগ্য কলাম তৈরি করে, তবে আপনাকে বিভিন্ন শতাংশের প্রস্থের কক্ষগুলি তৈরি করতে হবে, সম্ভবত আপনার ঘরের 'কলস্প্যান' একাধিকতে সেট করা উচিত?

উদাহরণস্বরূপ, সহজ শতাংশের গণনার জন্য মোট 100 প্রস্থ ব্যবহার করে এবং আপনার 80% এর একটি ঘর এবং 20% এর অন্য একটি ঘর প্রয়োজন বলে মনে করে দেখুন:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

অবশ্যই, ৮০% এবং ২০% কলামের জন্য, আপনি কেবল 100% প্রস্থের সেল কল্পান 5, 80% থেকে 4 এবং 20% থেকে 1 তে সেট করতে পারেন।

Comments

আরে @ সিউবিয়ার tdএস- তে শতাংশের প্রস্থ নির্দিষ্টকরণ থেকে আলাদা কীভাবে ?

— s4y

কলসপানকে এভাবে ব্যবহার করা ভয়ঙ্কর ধারণা। পরিবর্তে প্রস্থ ব্যবহার করবেন না কেন?

— পার্সি 21