फोर्स टेबल कॉलम की चौड़ाई हमेशा सामग्री की परवाह किए बिना तय की जानी चाहिए

Question

मेरे पास एक html तालिका है table-layout: fixedऔर एक सेट चौड़ाई के साथ एक td है। स्तंभ में अभी भी पाठ की सामग्री रखने के लिए विस्तार है जिसमें कोई स्थान नहीं है। क्या एक div में प्रत्येक td की सामग्री को लपेटने के अलावा इसे ठीक करने का कोई तरीका है?

उदाहरण: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

उदाहरण में, आप देख सकते हैं कि AAAAAAAAAAAA ... वाला स्तंभ स्पष्ट रूप से 50px चौड़े पर सेट होने के बावजूद फैलता है।

Comments

का डुप्लीकेट stackoverflow.com/q/4457506/1190388

— hjpotter92

Answer 1

तालिका की चौड़ाई निर्दिष्ट करें:

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

JsFiddle देखें

Comments

यह सामग्री को ट्रिम करता है

— विकाश

गजब का! यह भी सही के साथ काम करता है table-layout: fixed; width: 100%;।

— लुकास रेपे वैलैंडर

Answer 2

निम्नलिखित सीएसएस में देखने की कोशिश करें:

word-wrap:break-word;

वेब ब्राउज़र को डिफ़ॉल्ट रूप से "शब्दों" को तोड़ना नहीं चाहिए ताकि आप जो अनुभव कर रहे हैं वह ब्राउज़र का सामान्य व्यवहार है। हालाँकि आप इसे वर्ड-रैप सीएसएस निर्देश के साथ ओवरराइड कर सकते हैं।

आपको स्तंभ पर एक चौड़ाई और समग्र तालिका पर एक चौड़ाई सेट करने की आवश्यकता होगी। "चौड़ाई: 100%;" अपनी आवश्यकताओं के आधार पर भी ठीक होना चाहिए।

वर्ड-रैप का उपयोग वह नहीं हो सकता है जो आप चाहते हैं, हालांकि यह लेआउट को ख़राब किए बिना सभी डेटा दिखाने के लिए उपयोगी है।

Comments

यह, आर्य शॉ के उत्तर के साथ, मुझे वह व्यवहार मिला, जिसकी मुझे तलाश थी। कॉलम हमेशा पाठ की परवाह किए बिना एक ही चौड़ाई का होता है, और यह रिक्त स्थान न होने पर भी पाठ को लपेटता है।

— at डेटामनेशन ’

मैं कुछ इस तरह की तलाश कर रहा हूं, हालांकि ऐसा लगता है कि अगर टेबल-लेआउट पर सेट नहीं किया गया है तो काम नहीं करना चाहिए: निश्चित। हालाँकि टेबल-लेआउट निश्चित नहीं है, यदि टेबल हेड वें में एक कोलस्पैन है तो सीएसएस शैलीगत नहीं है। आप एक तालिका में शब्द-आवरण को कैसे काम करते हैं? stackoverflow.com/questions/42371945/…

— मैनुअल

Answer 3

टेबल रॉक को ठोस बनाकर सीएसएस से पहले रखें। तालिका की अपनी चौड़ाई को चित्रित करें, फिर एक 'कंट्रोलिंग' पंक्ति का उपयोग करें जिससे प्रत्येक td में एक स्पष्ट चौड़ाई हो, जिसमें से सभी तालिका टैग में चौड़ाई तक जुड़ जाएं।

सही HTML का उपयोग करके, हर जगह काम करने के लिए सैकड़ों html ईमेल करना, फिर w / css स्टाइल करना सभी IE, webkit और mozillas में कई मुद्दों पर काम करेगा।

इसलिए:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

300px चौड़ी एक मेज रखेंगे। ऐसी छवियां देखें जो चरम सीमा तक चौड़ाई से बड़ी हैं

Comments

w3school का कहना है कि html5 में समर्थित नहीं है

— v.oddou

widthविशेषता हटाई गई है, तो आप या तो सीएसएस का उपयोग widthसंपत्ति सेट स्तंभ चौड़ाई, उपयोग करने के लिए सिफारिश की एचटीएमएल 5 रास्ता या, <colgroup>और <col>तत्वों सही होने के बाद <table>टैग और किसी भी पहले <thead>, <tbody>या <tr>तत्वों।

— एस। एस्टीव्स

Answer 4

आप एक जोड़ सकते हैं divकरने के लिए tdहै, तो शैली है। यह आपकी इच्छानुसार काम करना चाहिए।

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

फिर सी.एस.एस.

td div { width: 50px; overflow: hidden; }

Answer 5

आप "ओवरफ्लो: हिडन" या "ओवरफ्लो-एक्स: हिडन" (सिर्फ चौड़ाई के लिए) के साथ भी काम कर सकते हैं। इसके लिए एक परिभाषित चौड़ाई (और / या ऊँचाई) की आवश्यकता होती है और शायद एक "प्रदर्शन: ब्लॉक" भी।

"अतिप्रवाह: छिपा हुआ" पूरी सामग्री को छुपाता है, जो परिभाषित बॉक्स में फिट नहीं होता है।

उदाहरण:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

सीएसएस:

td div { width: 100px; overflow-y: hidden; }

संपादित करें: मुझ पर शर्म आनी चाहिए, मैंने देखा है, आप पहले से ही "अतिप्रवाह" का उपयोग करते हैं। मुझे लगता है कि यह काम नहीं करता है, क्योंकि आप अपने तत्व के लिए "प्रदर्शन: ब्लॉक" सेट नहीं करते हैं ...

Answer 6

मैं इसे अधिकतम-चौड़ाई पर सेट करने का प्रयास करूँगा: 50px;

Comments

और चौड़ाई: 50 पीएक्स; यदि आप वास्तव में निश्चित चौड़ाई चाहते हैं।

— एड्रियन पी।

Answer 7

आप कॉलम हेडर में प्रतिशत का उपयोग भी कर सकते हैं और / या निर्दिष्ट कर सकते हैं:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

प्रतिशत के साथ बोनस कम कोड रखरखाव है: आप कॉलम की चौड़ाई को फिर से निर्दिष्ट किए बिना अपनी तालिका चौड़ाई को बदल सकते हैं।

कैविएट: यह मेरी समझ है कि पिक्सल में निर्दिष्ट तालिका चौड़ाई HTML 5 में समर्थित नहीं है; आपको इसके बजाय CSS का उपयोग करने की आवश्यकता है।

Answer 8

यह मेरे लिए काम करता है

td::after { 
content: ''; 
display: block; 
width: 30px;
}