टेबल सेल (एक सेल नहीं) के एक कॉलम में लाइन-ब्रेक को कैसे रोकें?

170

मैं तालिका के एक स्तंभ (एकल कक्ष नहीं) में स्वचालित पंक्ति विराम को कैसे रोक सकता हूं?

html css layout

— स्टीवन
स्रोत

1

कृपया एक उत्तर चुनें! ... अब बहुत देर हो चुकी है, मुझे लगता है

— Jaeeun Lee

258

आप सीएसएस शैली सफेद-स्थान का उपयोग कर सकते हैं:

white-space: nowrap;

— डेविड एम
स्रोत

4

मैं एक तालिका के एक स्तंभ में पंक्ति-विराम को रोकना चाहता हूं, एक कोशिका को नहीं।

— स्टीवन

11

तो इसे कॉलम में हर सेल में जोड़ें?

— डेविड एम

यदि आप इसे टेबल पर हर सेल के लिए लागू नहीं करना चाहते हैं, लेकिन सिर्फ विशिष्ट लोगों के लिए लागू करने के लिए आप चाहते हैं हर td सेल में एक वर्ग जोड़ें।

— जेम्स ब्लैक

मैं इसे एक ही कॉलम की सभी कोशिकाओं पर लागू करना चाहता हूं।

— स्टीवन

7

इस नियम के n वें बच्चे को चयनकर्ता के साथ आवेदन कर सकते हैं css-tricks.com/how-nth-child-works

— ज़ैक Lysobey

36

पूरा होने के लिए:

#table_id td:nth-child(2)  {white-space: nowrap;}

the table_idतालिका के 2 कॉलम में एक शैली लागू करने के लिए उपयोग किया जाता है ।

यह सभी प्रमुख ब्राउज़रों द्वारा समर्थित है, IE ने IE9 से इसे समर्थन देना शुरू किया।

— estani
स्रोत

19

Nowrap शैली का उपयोग करें:

<td style="white-space:nowrap;">...</td>

यह सीएसएस है!

— डेरेक इलचुक
स्रोत

मैं एक ही कॉलम की सभी कोशिकाओं में लाइन-ब्रेक को रोकना चाहता हूं।

— स्टीवन

17

बस जोड़ दो

style="white-space:nowrap;"

उदाहरण:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>

— हारुन या राशिद
स्रोत

क्या यह पूरी तालिका (यानी सभी कॉलम) पर लागू नहीं होगा और न केवल एक व्यक्तिगत कॉलम पर?

— जोशुआ पिंटर

15

ऐसा करने के कुछ तरीके हैं; उनमें से कोई भी आसान, स्पष्ट तरीका नहीं है।

श्वेत-स्थान लागू करना: <col>अब काम नहीं करेगा; केवल चार सीएसएस गुण काम करते हैं<col> तत्वों हैं - पृष्ठभूमि-रंग, चौड़ाई, सीमा और दृश्यता। IE7 और पहले सभी गुणों का समर्थन करते थे, लेकिन ऐसा इसलिए है क्योंकि उन्होंने एक अजीब तालिका मॉडल का उपयोग किया था। IE8 अब हर किसी से मेल खाता है।

तो, आप इसे कैसे हल करते हैं?

ठीक है, अगर आप IE (IE8 सहित) को अनदेखा कर सकते हैं, तो आप प्रत्येक पंक्ति से :nth-child()विशेष <td>s का चयन करने के लिए छद्मकोश का उपयोग कर सकते हैं । आप उपयोग करेंगे td:nth-child(2) { white-space:nowrap; }। (यह इस उदाहरण के लिए काम करता है, लेकिन अगर आपके पास कोई रस्सियाँ या जुकाम शामिल हों तो वह टूट जाएगा।)

यदि आपको IE का समर्थन करना है, तो आपको चारों ओर लंबा रास्ता तय करना होगा और हर वर्ग को लागू करना होगा <td> करना होगा जिसे आप प्रभावित करना चाहते हैं। यह बेकार है, लेकिन उन्हें टूट जाता है।

लंबे समय में, सीएसएस में इस कमी को ठीक करने के लिए प्रस्ताव हैं, ताकि आप एक कॉलम में सभी कोशिकाओं पर शैलियों को आसानी से लागू कर सकें। आप ऐसा कुछ करने में सक्षम होंगे td:nth-col(2) { white-space:nowrap; }और यह वही करेगा जो आप चाहते हैं।

— Xanthir
स्रोत

13

<td style="white-space: nowrap">

nowrapमेरा मानना है कि यह विशेषता पदावनत है। ऊपर पसंदीदा तरीका है।

— दान बृण
स्रोत

6

<table class="blueTable">
  <tr>
     <td>My name is good</td>
   </tr>
</table> 
<style>   
    table.blueTable td,
    table.blueTable th {
        white-space: nowrap;
        /* non-question related further styling */
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
        text-align: left;
    }
</style>

यह व्हाइट स्पेस प्रॉपर्टी की वैल्यू नॉरैप के साथ एक उदाहरण का उपयोग है, ब्लूटेबल टेबल की कक्षा है, टेबल के नीचे सीएसएस स्टाइल हैं।

— मतोवू रोनाल्ड
स्रोत

5

सामान्य पाठों के बजाय अपने पाठ में गैर-विराम स्थान रखें। उबंटू पर मैं इसे (कंपोज़ की) -स्पेस-स्पेस के साथ करता हूं।

— रोजर Keays
स्रोत

5

इसे पूरी तालिका में लागू करने के लिए, आप इसे tableटैग के भीतर रख सकते हैं :

<table style="white-space:nowrap;">

— OlgaMaciaszek
स्रोत