मैं तालिका कॉलम चौड़ाई को कैसे सीमित कर सकता हूं?

मेरी तालिका में से किसी एक कॉलम में व्हाइटस्पेस के बिना एक लंबा टेक्स्ट हो सकता है। 150px कहने के लिए, मैं अपनी चौड़ाई को कैसे सीमित कर सकता हूं? मैं नहीं चाहता कि यह हमेशा 150 पीएक्स हो (यदि यह खाली है तो यह संकीर्ण होना चाहिए), लेकिन यदि कोई लंबा टेक्स्ट है तो मैं इसे 150 पीएक्स और टेक्स्ट को लपेटने के लिए सीमित करना चाहता हूं।मैं तालिका कॉलम चौड़ाई को कैसे सीमित कर सकता हूं?

यहां एक परीक्षण उदाहरण है: http://jsfiddle.net/Kh378/ (चलिए तीसरे कॉलम को सीमित करते हैं)।

अग्रिम धन्यवाद।

अद्यतन:
स्थापना इस शैली:

word-wrap: break-word; 
max-width: 150px;

IE8 में काम नहीं करता है (विभिन्न कंप्यूटरों पर परीक्षण किया) और मैं इसे IE के किसी भी संस्करण में काम नहीं करता लगता है।

स्रोत

2011-09-14 nightcoder

चूंकि यह प्रश्न लगभग तीन साल पुराना है और वर्तमान में इसका कोई इनाम नहीं है, मैं सोच रहा था कि क्या उसे अभी भी जवाब चाहिए? –

@ फ्रैंक कॉनिजन, हाँ, यह करता है! :) – nightcoder

उस 2 साल बाद उत्तर – Developer

Updated

तालिका के td और th टैग पर मैं कहा:

word-wrap: break-word; 
max-width: 150px;

पूरी तरह से हर ब्राउज़र लेकिन एक शुरुआत में संगत नहीं है।

स्रोत

2011-09-14 03:01:26 Brandon

दुर्भाग्यवश, यह IE8 में काम नहीं करता है (और मुझे लगता है कि यह आईई के किसी भी संस्करण में काम नहीं करता है .. ।)। – nightcoder

आप के साथ अपने स्तंभ शैली में सक्षम होना चाहिए:

max-width: 150px; 
word-wrap: break-word;

ध्यान दें कि word-wrap 5.5 + IE में समर्थित है, Firefox 3.5+, और वेबकिट ब्राउज़रों (क्रोम और सफारी)।

स्रोत

2011-09-14 03:03:11 isNaN1247

इस पृष्ठ को समान/समकक्ष समाधान में, अधिक जानकारी में, विशेष रूप से अधिकतम-चौड़ाई और (वर्तमान में) समस्याएं देखें http://stackoverflow.com/a/24620364/2255628 –

प्रश्न का उत्तर another StackOverflow thread में दिया गया था। संक्षेप में, आपको अधिकतम चौड़ाई के बजाय चौड़ाई का उपयोग करना चाहिए।

स्रोत

2014-12-30 00:08:03

यह मेरे लिए काम नहीं करता है। क्या आप एक jsfiddle तैयार कर सकते हैं? – nightcoder

आपको इसकी बजाय चौड़ाई का उपयोग करने की आवश्यकता है।

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th>     
      <th style="width: 150px;"></th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

लेकिन बस <thead> अनुभाग में।

स्रोत

2015-08-14 21:09:12

अधिकतम-चौड़ाई अनुकरण करने के लिए एक विकल्प नहीं है:

simulateMaxWidth: function() { 
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell 
    this.$el.find('th').each(function(ind, th) { 
     var el = $(th); 
     var maxWidth = el.attr('max-width'); 
     if (maxWidth && el.width() > maxWidth) { 
      el.css('width', maxWidth + 'px'); 
     } 
    }); 
}

इस समारोह $ पर कहा जा सकता है (विंडो) .on ('का आकार परिवर्तन', ...) कई बार

this.$el

पेरेंट तत्व का प्रतिनिधित्व करता है, मेरे मामले में मैं वें तत्व उन जो अधिकतम-चौड़ाई होना चाहिए के लिए कठपुतली

है, होना चाहिए की तरह एक अधिकतम-चौड़ाई विशेषता:

<th max-width="120">

स्रोत

2016-06-28 10:12:59 user2846569

1) <th> में प्रत्येक कॉलम के लिए अपनी आवश्यकता के अनुसार चौड़ाई निर्दिष्ट करें।

2) के <tr> में प्रत्येक <td> के लिए शब्द रैप जोड़ें।

word-wrap: break-word;

स्रोत

2017-05-09 11:43:54

बाद क्रोम में कुछ प्रयोग मैं के लिए आया था निम्नलिखित:

अगर अपनी मेज एक <th> है होना चाहिए कि या तो एक "चौड़ाई" या एक "अधिकतम-चौड़ाई" सेट
<td> के पास "अधिकतम-चौड़ाई" और "शब्द-लपेटें: ब्रेक-शब्द" सेट होना चाहिए;

यदि आप <th> में "चौड़ाई" का उपयोग करते हैं तो इसका मूल्य उपयोग किया जाएगा। यदि आप <th> में "अधिकतम-चौड़ाई" का उपयोग करते हैं तो इसके बजाय <td> का "अधिकतम-चौड़ाई" मान उपयोग किया जाता है।

तो यह कार्यक्षमता काफी जटिल है। और मैंने हेडर के बिना टेबलों का अध्ययन भी नहीं किया था या लंबे तारों के बिना "ब्रेक-वर्ड" की आवश्यकता थी।

स्रोत

2017-10-10 18:34:25 user2587656

यह बहुत आसान

आप की तरह विशेषताओं को जोड़ने सकता है इन

अधिकतम-चौड़ाई

अधिकतम-ऊंचाई

वे एक विशेषता के रूप में html में सेट किया जा सकता या सीएसएस में एक शैली के रूप में

स्रोत

2017-10-11 08:07:22 Kano

मैं तालिका कॉलम चौड़ाई को कैसे सीमित कर सकता हूं?

उत्तर

संबंधित मुद्दे