सीएसएस: टेबल कोशिकाओं को काटें, लेकिन जितना संभव हो उतना फिट

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>को चौड़ाई बढ़ाने के बजाय s को समाप्त कर सकते <td>हैं: jsfiddle.net/7CURQ/64

— सैम

दरअसल, यह गैर-छंटे हुए कॉलम के डायनामिक कॉलम को खराब करने के लिए लगता है। वे हमेशा न्यूनतम चौड़ाई तक सिकुड़ते प्रतीत होते हैं।

— सैम

Answer 2

मेरा मानना ​​है कि मेरे पास एक गैर-जावास्क्रिप्ट समाधान है! कभी नहीं से देर भली, ठीक? आखिर यह एक उत्कृष्ट प्रश्न है और Google इसके ऊपर है। मैं एक जावास्क्रिप्ट फिक्स के लिए समझौता नहीं करना चाहता था क्योंकि मुझे लगता है कि पृष्ठ को लोड करने के बाद इधर-उधर होने वाली चीजों की थोड़ी सी घबराहट अस्वीकार्य है।

विशेषताएं :

• कोई जावास्क्रिप्ट नहीं
• कोई निश्चित लेआउट नहीं
• कोई भार या प्रतिशत-चौड़ाई नहीं
• किसी भी संख्या में कॉलम के साथ काम करता है
• सरल सर्वर-साइड पीढ़ी और क्लाइंट-साइड अपडेटिंग (कोई गणना आवश्यक नहीं)
• क्रॉस-ब्राउज़र संगत

यह कैसे काम करता है : तालिका सेल के अंदर दो अलग-अलग तत्वों में सामग्री की दो प्रतियां अपेक्षाकृत स्थित कंटेनर तत्व के भीतर होती हैं। स्पेसर तत्व सांख्यिकीय रूप से स्थित है और इस तरह से तालिका कोशिकाओं की चौड़ाई को प्रभावित करेगा। स्पेसर सेल की सामग्री को लपेटने की अनुमति देकर हम उन तालिका कोशिकाओं की "सबसे फिट" चौड़ाई प्राप्त कर सकते हैं जिनकी हम तलाश कर रहे हैं। यह हमें अपेक्षाकृत सामग्री के उपयोग के लिए दृश्यमान सामग्री की चौड़ाई को सीमित करने के लिए पूरी तरह से तैनात तत्व का उपयोग करने की अनुमति देता है।

परीक्षण और काम कर रहा है: IE8, IE9, IE10, क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा

परिणाम छवियाँ :

JSFiddle : http://jsfiddle.net/zAeA2/

नमूना HTML / CSS :

<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

— Riccardo Casatta

यह बहुत बढ़िया है! मैं डुप्लिकेट सामग्री से बचने के लिए attr का उपयोग करके अपना स्वयं का संस्करण बनाता हूं: jsfiddle.net/coemL8rf/2

— Jayen

@ जेन नाइस - शायद माउस पर टूलटिप प्राप्त करने के titleबजाय उपयोग करें data-spacer:)

— विलियम जॉर्ज

@ जय, मैंने अभी तुम्हारी कोशिश की है और यह सही तरफ सेल को छोटा नहीं करता है, इसलिए यह समान रूप से बहने वाली कोशिकाओं की आवश्यकता को पूरा नहीं करता है। मैं क्रोम 46 का उपयोग कर रहा हूं।

— सैम

@Sam हाँ यह सही है। मेरा उदाहरण केवल दिखाता है कि दोनों प्रकार की कोशिकाओं को सामग्री की नकल के बिना बनाया जा सकता है। मैं सवाल का जवाब देने की कोशिश नहीं कर रहा था, बस एक और रास्ता दिखा रहा था। यदि आप मेरे उदाहरण में HTML बदलते हैं, तो यह आपके इच्छानुसार काम करता है।

— Jayen

Answer 3

मुझे कुछ दिन पहले उसी चुनौती का सामना करना पड़ा है। ऐसा लगता है कि लूसिफ़ेर सैम को सबसे अच्छा समाधान मिला ।

लेकिन मैंने देखा कि आपको स्पेसर तत्व पर सामग्री की नकल करनी चाहिए। सोचा कि यह इतना बुरा नहीं है, लेकिन मैं चाहूंगा कि titleक्लिप्ड टेक्स्ट के लिए पॉपअप भी लागू किया जाए । और इसका मतलब है कि लंबे पाठ मेरे कोड में तीसरी बार दिखाई देंगे।

यहां मैंने स्पेसर को जेनरेट करने और HTML को साफ रखने के लिए छद्म तत्व titleसे ऐक्सेस का प्रस्ताव :afterरखा है।

IE8 +, FF, Chrome, Safari, Opera पर काम करता है

<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>

JQuery जो आकार परिवर्तन घटना को हुक करता है:

$(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

बहुत आसान और अधिक सुरुचिपूर्ण समाधान है।

टेबल-सेल के भीतर जिसे आप ट्रंकेशन लागू करना चाहते हैं, बस सीएसएस टेबल-लेआउट के साथ एक कंटेनर डिव को शामिल करें: फिक्स्ड। यह कंटेनर पेरेंट टेबल सेल की पूरी चौड़ाई लेता है, इसलिए यह उत्तरदायी भी है।

तालिका में तत्वों पर ट्रंकेशन लागू करना सुनिश्चित करें।

IE8 + से काम करता है

<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;
    }

यहाँ एक काम कर रहा है Fiddle https://jsfiddle.net/d0xhz8tb/

Comments

इस समाधान को गैर-संरचनात्मक प्रभाव प्राप्त करने के लिए 2 अतिरिक्त ब्लॉक-स्तरीय तत्वों की आवश्यकता होती है। एक टेबल सेल को "डिस्प्ले: टेबल" पर सेट करना संभव है, जो आपको एक डिव से छुटकारा दिलाता है। jsfiddle.net/rza4hfcv यकीन नहीं, मुझे इस बारे में क्या सोचना चाहिए। लेकिन आपके समाधान को साझा करने के लिए धन्यवाद!

— आर्मिन

क्या आपने उस समाधान के साथ किसी समस्या का अनुभव किया? मैं इसे एक पेशेवर सेटिंग में उपयोग करने के बारे में सोच रहा हूं।

— आर्मिन

@armin, उस सेल को डुप्लिकेट करने का प्रयास करें जिसे आप छोटा करना चाहते हैं: आप एक से अधिक साइड नहीं डाल सकते।

— डैनियल

मैं यह नहीं कहूंगा कि यह एक अंतिम समाधान है। आप किसी तालिका के मुख्य लाभों में से एक को ढीला करते हैं: यह कि कॉलम इसकी सामग्री के अनुसार आकार बदलता है। यदि आप प्रत्येक स्तंभ को इस तरह सेट करते हैं, तो उन सभी की चौड़ाई समान होगी, चाहे उसकी सामग्री की लंबाई कोई भी हो।

— डैनियल

@DanielM आप तालिका को और अधिक नेस्टिंग करके समाधान का विस्तार कर सकते हैं - जैसे पुराने टेबल-लेआउट-दिनों में - लेकिन अब केवल सीएसएस के माध्यम से।

— अरमान

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

हां, मैं कहूंगा कि तीसवाँ इसके पास है, इसे करने का कोई तरीका नहीं है जब तक कि आप एक js पद्धति का उपयोग न करें। आप रेंडरिंग शर्तों के एक जटिल सेट के बारे में बात कर रहे हैं जिसे आपको परिभाषित करना होगा। जैसे कि क्या होता है जब दोनों कोशिकाएं अपने अपार्टमेंट के लिए बहुत बड़ी हो रही हैं, तो आपको यह तय करना होगा कि किसके पास प्राथमिकता है या बस उन्हें क्षेत्र का एक प्रतिशत दें और यदि वे ओवरफ्लो हैं तो वे दोनों उस क्षेत्र को ले लेंगे और केवल तभी जब व्हाट्सएप होगा आप अपने पैरों को दूसरी कोशिका में फैलाते हैं, या तो सीएसएस के साथ ऐसा करने का कोई तरीका नहीं है। हालांकि कुछ सुंदर कायरतापूर्ण चीजें हैं जो लोग सीएसएस के साथ करते हैं जो मैंने नहीं सोचा है। मुझे वास्तव में संदेह है कि आप यह कर सकते हैं।

Answer 9

नमूना के उत्तर की तरह, फिर से यदि जावास्क्रिप्ट एक स्वीकार्य उत्तर है, तो मैंने विशेष रूप से इस उद्देश्य के लिए एक jQuery प्लगइन बनाया: https://github.com/marcogrcr/jquery-tableoverflow

प्लगइन का उपयोग करने के लिए बस टाइप करें

$('selector').tableoverflow();

पूरा उदाहरण: http://jsfiddle.net/Cw7TD/3/embedded/result/

संपादन:

• IE संगतता के लिए jsfiddle में ठीक करें।
• बेहतर ब्राउज़र संगतता (क्रोम, फ़ायरफ़ॉक्स, IE8 +) के लिए jsfiddle में ठीक करें।

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;
}

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

Comments

महान समाधान! धन्यवाद!

— वल्लरीउउह ३०'१५ को ११:३

बहुत अच्छा लग रहा है जब तक कि मैंने एक लचीली सेल से पहले एक स्थिर सेल नहीं जोड़ा: jsfiddle.net/7u59asyp/5

— सैम

यह एकमात्र ऐसा काम है जो मेरे लिए काम करता है, भले ही पूरी तरह से नहीं, क्योंकि मेरे पास अपेक्षित सामग्री के आकार के साथ 4 कॉलम हैं

— डाउनहैंड

Answer 11

बस अपने निम्नलिखित नियम जोड़ें 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 12

यह प्रश्न Google में शीर्ष पर है, इसलिए मेरे मामले में, मैंने https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ से css स्निपेट का उपयोग किया, लेकिन इसे td में लागू नहीं किया। वांछित परिणाम।

मुझे td में पाठ के चारों ओर एक div टैग जोड़ना था और दीर्घवृत्त ने आखिरकार काम किया।

संक्षिप्त HTML कोड;

<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 13

जांचें कि क्या "नोव्रेप" समस्या को एक हद तक हल करता है। नोट: HTML5 में nowrap समर्थित नहीं है

<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विशेषता के समान प्रभाव है (और मैं उदाहरण में इसका उपयोग कर रहा हूं)। यहाँ जोड़ना कुछ भी नहीं बदलता है, जहाँ तक मैं बता सकता हूँ।

— एस ४

Answer 14

आप सही सेल की चौड़ाई को आवश्यक चौड़ाई से न्यूनतम पर सेट कर सकते हैं, फिर लेफ्ट सेल के अंदर से अतिप्रवाह-छिपे + टेक्स्ट-ओवरफ़्लो लागू कर सकते हैं, लेकिन फ़ायरफ़ॉक्स यहाँ छोटी गाड़ी है ...

हालांकि, लगता है, फ्लेक्सबॉक्स मदद कर सकता है

Answer 15

मैं हाल ही में इस पर काम कर रहा हूं। इस jsFiddle परीक्षण की जाँच करें , यह अपने आप को व्यवहार की जांच करने के लिए बेस टेबल की चौड़ाई बदलने की कोशिश करें)।

समाधान को दूसरे में एक तालिका एम्बेड करना है:

<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 है । दोनों कोशिकाओं के पाठ और परीक्षण करने के लिए मुख्य तालिका की चौड़ाई बदलें। आशा है कि यह वही है जो आप खोज रहे हैं ...

— IG Pascual

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>

बेशक, 80% और 20% के कॉलम के लिए, आप 100% चौड़ाई वाले सेल कोल्प्सन को 5, 80% से 4 और 20% से 1 तक सेट कर सकते हैं।

Comments

अरे @ सियुबर। यह कैसे tds पर प्रतिशत चौड़ाई निर्दिष्ट करने से अलग है ?

— s4y

इस तरह से कोल्पसन का उपयोग करना एक भयानक विचार है। इसके बजाय चौड़ाई का उपयोग क्यों नहीं करते?

— पर्सी