टेबुल सेल को रैप करने से कैसे रोकें

Question

क्या किसी को पता है कि मैं टेबल सेल में पाठ को लपेटने से कैसे रोक सकता हूं? यह एक टेबल के हेडर के लिए है, और हेडिंग इसके तहत डेटा की तुलना में बहुत लंबा है, लेकिन मुझे इसे केवल एक लाइन पर प्रदर्शित करने की आवश्यकता है। यदि स्तंभ बहुत चौड़ा है तो ठीक है।

मेरी (सरलीकृत) तालिका का HTML इस तरह दिखता है:

<table>
  <thead>
    <tr>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
      <th>
        <div>Really long column heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
      <td>
        <div>data</div>
      </td>
    </tr>
  </tbody>
</table>

शीर्षक स्वयं को thपृष्ठ पर जावास्क्रिप्ट से संबंधित कारणों के लिए टैग के अंदर एक div में लपेटा जाता है ।

तालिका कई लाइनों पर शीर्षकों के साथ आ रही है। यह केवल तब होता है जब तालिका पर्याप्त रूप से चौड़ी होती है, क्योंकि ब्राउज़र क्षैतिज स्क्रॉलिंग से बचने की कोशिश कर रहा है। मेरे मामले में, हालांकि, मुझे क्षैतिज स्क्रॉलिंग चाहिए।

कोई विचार?

Answer 1

white-spaceसंपत्ति पर एक नज़र है , इस तरह से इस्तेमाल किया:

th {
    white-space: nowrap;
}

यह सामग्री <th>को एक पंक्ति में प्रदर्शित करने के लिए बाध्य करेगा ।

लिंक किए गए पृष्ठ से, यहां विभिन्न विकल्प दिए गए हैं white-space:

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

पूर्व
यह मान उपयोगकर्ता एजेंटों को श्वेत स्थान के अनुक्रमों को ध्वस्त करने से रोकता है। लाइनों को केवल संरक्षित न्यूलाइन वर्णों पर तोड़ा जाता है।

nowrap
यह मान 'सामान्य' के रूप में सफेद स्थान को ढहता है, लेकिन पाठ के भीतर लाइन विराम को दबा देता है।

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

प्री-लाइन
यह मान उपयोगकर्ता एजेंटों को श्वेत स्थान के अनुक्रम को ढहाने के लिए निर्देशित करता है। संरक्षित न्यूलाइन वर्णों पर लाइनें टूटी हुई हैं, और लाइन बॉक्स को भरने के लिए आवश्यक है।

Comments

एक ही सेल में इनपुट फील्ड और बटन के लिए काम नहीं करता है। नीचे बेतरतीब ढंग से स्थानों।

— Doomsknight

Tabletable-layout:fixed;इसके लिए काम करने के लिए तत्व का होना आवश्यक है ।

— daniloquio

@Doomsknight क्या आपको एक इनपुट फ़ील्ड और उसी सेल में किसी अन्य तत्व के साथ इसे प्राप्त करने का एक तरीका मिला?

— 14 नवंबर को 14

सफेद-स्थान: पूर्व; मैं -28.04 की जरूरत के रूप में क्या कर रहा था - और 28.04

— ब्रेंट

@Doomsknight मेरे पास एक चेकबॉक्स के साथ एक ही मुद्दा था और इसे सीएसएस के साथ अद्यतन करके हल कियाinput { display: inline; }

— प्रोग्रामर

Answer 2

<th nowrap="nowrap">

या

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

या

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>

Comments

ध्यान दें कि nowrapपदावनत कर दिया गया है। w3.org/TR/html401/struct/tables.html#h-11.2.6 । इसके बजाय स्टाइल शीट का उपयोग करें।

— बुद्धिमानबीज

ध्यान दें। यदि लापरवाही से उपयोग किया जाता है, तो इस विशेषता के परिणामस्वरूप अत्यधिक विस्तृत कोशिकाएं हो सकती हैं।

— ArifMustafa

@wisbucky कोई "स्टाइल शीट का उपयोग कैसे करता है"?

— रोजरपैक

Answer 3

इसे करने के कम से कम दो तरीके हैं:

"Td" टैग के अंदर nowrap विशेषता का उपयोग करें:

<th nowrap="nowrap">Really long column heading</th>

अपने शब्दों के बीच गैर-विराम योग्य रिक्त स्थान का उपयोग करें:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>

Comments

ध्यान दें कि nowrapपदावनत कर दिया गया है। w3.org/TR/html401/struct/tables.html#h-11.2.6 । इसके बजाय स्टाइल शीट का उपयोग करें।

— बुद्धिमानबीज

Answer 4

मुझे इस सवाल पर हाइफ़न में टेक्स्ट रैपिंग को रोकने की ज़रूरत थी।

मैंने इस तरह से इसे किया:

<td><nobr>Table Text</nobr></td>

संदर्भ:

सभी ब्राउज़रों पर हाइफ़न पर लाइन ब्रेक को कैसे रोकें

Comments

यह ध्यान देने योग्य है कि nobrटैग गैर-मानक है, जैसा कि इस उत्तर में जुड़े स्वीकृत उत्तर में बताया गया है: stackoverflow.com/a/8755071/4257

— pkaeding

बिलकुल सही। आपकी बात अच्छी तरह से प्राप्त है। मैंने उन सभी टिप्पणियों को पढ़ा, जो संबंधित टिप्पणीकारों के अनुभव को नोट किया, और एक निर्णय कॉल किया। हाइफ़न थोड़ा मुश्किल है। (नोट: आपकी टिप्पणी से जुड़ा प्रश्न वही है जो मैंने अपने उत्तर में जोड़ा है)

— cssyphus

हाँ, यह वही प्रश्न था। मैं सिर्फ यह सुनिश्चित करना चाहता था कि भविष्य में किसी को यह उत्तर मिले, और संबंधित संदर्भ को पढ़ने की जहमत न उठाए।

— pkaeding

Answer 5

प्रतिक्रिया / सामग्री UI के साथ उपयोग के लिए

यदि आप यहां सोच रहे हैं कि यह कैसे प्रतिक्रिया में निर्माण करते समय सामग्री यूआई के लिए काम करता है, तो यहां बताया गया है कि आप इसे अपने <TableHead>घटक में कैसे जोड़ते हैं :

<TableHead style={{ whiteSpace: 'nowrap'}}>