टेबल सेल <td> को रैप करने के लिए कैसे मजबूर करें?

146

संपूर्ण पृष्ठ को * लपेटने योग्य एक main.css फ़ाइल में परिभाषित किया गया है

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

पूरे पृष्ठ को पाले:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

यह बस हर बार जब मैं जमा करता हूं
यह पृष्ठ एक div के भीतर भी है। क्या मुझे div और टेबल की चौड़ाई भी सेट करने की आवश्यकता है?

html css html-table

— डॉक्टर छुट्टी
स्रोत

1

आप कहाँ परिभाषित कर रहे हैं wrappable?

— कैनन

2

.wrappableकक्षा को कहाँ परिभाषित किया गया है? आप कौन सा ब्राउज़र उपयोग कर रहे हैं?

— दानी

उपयोग किया जा रहा ब्राउज़र विशेष रूप से महत्वपूर्ण है --- IE के पुराने संस्करण समर्थन नहीं करते हैं max-width। बहुत सारी अन्य चीजें हैं जो समस्या हो सकती हैं और अधिक जानकारी के बिना कहना असंभव है, लेकिन यह एक है जिसे तोड़ा जा सकता है।

— क्रिस मॉर्गन

Im मूल रूप से सिर्फ एक चौड़ाई के भीतर रहने के लिए प्रस्तुत पाठ रखने की कोशिश कर रहा हूं और जब तक मैं इसे स्वीकार नहीं करता तब तक तालिका को लंबा नहीं करना चाहिए

— Doc Holiday

यह stackoverflow.com/

— 96560829/1924979

292

table-layout:fixedतालिका word-wrap:break-wordमें और td में उपयोग करें ।

इस उदाहरण को देखें:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

डेमो:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>

स्निपेट का विस्तार करें

— jim31415
स्रोत

आपको सीमा-पतन जोड़ना चाहिए: अपने उत्तर के शीर्ष भाग को थोड़ा सा ढहना चाहिए ताकि जो लोग नेत्रहीन आपके उत्तर को स्कैन कर रहे हैं उन्हें पूर्ण उत्तर जल्दी मिल सके।

— dwoodwardgb

थोड़ा और संशोधनों की तालिका के लिए {सीमा-पतन: पतन; तालिका-लेआउट: निश्चित; शब्द-आवरण: विराम-शब्द;} तालिका td {चौड़ाई: 100px; वर्ड-रैप: ब्रेक-वर्ड;}

— कुलदीप कुमार

44

मेरे लिए इसका काम करता है।

<style type="text/css">

 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

और तालिका विशेषता है:

table { 
  table-layout: fixed;
  width: 100%
}

— लवकुश अग्रवाल
स्रोत

15

td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}

— Jafstar
स्रोत

6

शायद आप कोड की व्याख्या कर सकते हैं, इसलिए यह किसी के लिए भी स्पष्ट होगा

— फेडरिको

यह साफ मेज दिखाता है, लेकिन सामग्री कट जाती है; अर्थात। अगर इसकी बड़ी सामग्री कुछ शब्दों को नहीं देख सकती है। overflow:hidden

— wpcoder

हालांकि अधिकतम चौड़ाई हार्डकोडिंग अच्छा नहीं है। यह बड़े प्रस्तावों के साथ-साथ बड़े पैमाने पर नहीं होगा, आदि आप तालिका को सही आकार देने के लिए प्रतिक्रिया देना चाहते हैं।

— user959690

4

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

max-width:someValue;
word-wrap:break-word

— फेंग हान
स्रोत

5

ध्यान दें कि max-widthएक pxमान होना चाहिए , न कि%

— अधिकतम

3

मेरे लिए यह तब काम आया जब मुझे एक सेल में "सुंदर" JSON प्रदर्शित करने की आवश्यकता थी:

td { white-space:pre }

`white-space`संपत्ति के बारे में अधिक जानकारी :

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

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

nowrap: यह मान व्हाइट स्पेस को ढहता है normal, लेकिन टेक्स्ट के भीतर लाइन ब्रेक को दबा देता है।

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

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

(इसके अलावा, स्रोत पर अधिक देखें ।)

— ashleedawg
स्रोत

1

बस जोड़ें: word-break: break-word; आप तालिका वर्ग के लिए।

— सज्जाद अलजिलेज़ी
स्रोत

0

यदि आप स्तंभ को ठीक करना चाहते हैं तो आपको चौड़ाई निर्धारित करनी चाहिए। उदाहरण के लिए:

<td style="width:100px;">some data</td>

— यूजीन
स्रोत

1

मैंने कोशिश की है कि ... यह किसी कारण से तालिका का विस्तार करता रहे >

— डॉक्टर हॉलिडे

0

यह समस्या से निपटने का एक और तरीका है यदि आपके पास लंबे तार हैं (जैसे फ़ाइल पथ नाम) और आप केवल कुछ वर्णों (जैसे स्लैश) पर तार तोड़ना चाहते हैं। आप HTML में स्लैश से ठीक पहले (या बाद में) यूनिकोड जीरो स्पेस स्पेस के अक्षर डाल सकते हैं ।

— निशान लता
स्रोत

0

.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

मैंने बाइनरी डेटा और इसके पूरी तरह से यहां काम करने के साथ परीक्षण किया है।

— jaip
स्रोत

टेबल सेल <td> को रैप करने के लिए कैसे मजबूर करें?

डेमो:

white-spaceसंपत्ति के बारे में अधिक जानकारी :

`white-space`संपत्ति के बारे में अधिक जानकारी :