फोर्स टेबल कॉलम चौड़ाई हमेशा सामग्री के बावजूद तय की जा सकती है

Question

मेरे पास table-layout: fixed और एक सेट चौड़ाई वाला एक टीडी है। कॉलम अभी भी टेक्स्ट की सामग्री को पकड़ने के लिए विस्तारित है जिसमें कोई स्थान नहीं है। क्या 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 करने के लिए स्थापित किया जा रहा फैलता है।

Answer 1

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

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

देखें jsFiddle

Answer 2

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

Answer 3

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

सही HTML का उपयोग करके हर जगह काम करने के लिए सैकड़ों एचटीएमएल ईमेल करने के लिए, फिर स्टाइलिंग डब्ल्यू/सीएसएस सभी आईई, वेबकिट और मोज़िला में कई मुद्दों के आसपास काम करेगा।

तो

:

<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 विस्तृत में एक टेबल रखने जाएगा। छवियों कि चरम

Answer 4

प्रयास करें निम्नलिखित सीएसएस में देखकर चौड़ाई से बड़े होते हैं देखें:

word-wrap:break-word; 

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

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

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

Answer 5

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

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

फिर सीएसएस।

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

Answer 6

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

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

उदाहरण:

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; } 

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