मैं अंतिम कॉलम को छोड़कर न्यूनतम करने के लिए टेबल सेल की चौड़ाई कैसे निर्धारित करूं?

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

जाहिर है यह है! एक शर्मनाक, यह देखते हुए कि मैंने सिर्फ सीएसएस क्षेत्र को गलत बताया है।

— शाहबाज

Answer 1

whitespace-wrap: nowrapवैध सीएसएस नहीं है। यह white-space: nowrapआप के लिए देख रहे हैं।

Answer 2

यह Google Chrome में काम करता है, कम से कम। ( jsFiddle )

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

मेरा दिन भी बनाया :) <3

— काँन सोरल

मुझे widthअपनी आवश्यकताओं के लिए दृष्टिकोण को फ्लिप करना पड़ा क्योंकि मेरे पास कई विस्तृत कॉलम हैं (बजाय एक विस्तृत कॉलम के लिए ऊपर दिए गए समाधान बेहतर काम करता है)। मैं हटाया width: 99%से expandऔर कहा कि width: 1%करने के लिए shrinkऔर इस समाधान मेरे लिए अच्छी तरह से काम!

— कैम्पबेलन

लवली! यदि आप चाहते हैं कि एक ही कॉलम को विस्तारित किया जाए, तो एक कक्षा के साथ सब कुछ टैग करने के बजाय, मैंने ऐसा किया: td:nth-child(1), td:nth-child(2){white-space:nowrap;} td:nth-child(3){width: 99%;}- अगर किसी भी नए द्वारा ड्रॉप किया जाता है। :)

— एलिजावेई

@ElizaWy में इस सवाल का जवाब ( stackoverflow.com/questions/9623601/... ) मैं एक jQuery स्क्रिप्ट बनाने, कि आपको नकल है colके classलिए विशेषताओं के मूल्य इसी तालिका tdरों

— yunzen

Answer 3

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

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

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

Comments

सादगी से प्यार करो।

— juanmirocks

FYI करें, कम से कम IE11 (एज मोड) में, width: 1px;न्यूनतम चौड़ाई को रेंडर करने के लिए नॉन-लास्ट कॉलम पाने के लिए नॉन-लास्ट चाइल्ड स्टाइल को जोड़ना होगा।

— EWH

स्पष्ट रूप से इस पृष्ठ पर सबसे साफ समाधान! 👍

— मंडल

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>खुद को निचोड़ने से टेबल को पकड़ने के लिए पर्याप्त नहीं है।