सीएसएस का उपयोग कर टेक्स्ट की एक पंक्ति में टेबल सेल को कैसे सीमित करें?

Question

मेरे पास उपयोगकर्ताओं की एक सारणी है जहां प्रत्येक पंक्ति में उनके नाम, ई-मेल पता, और ऐसे होते हैं। कुछ उपयोगकर्ताओं के लिए यह पंक्ति एक टेक्स्ट लाइन उच्च है, कुछ अन्य लोगों के लिए, आदि। लेकिन मुझे लगता है कि तालिका की प्रत्येक पंक्ति एक टेक्स्ट लाइन ऊंची हो, बाकी को छीन ले।

मैं इन दो सवालों देखा:

• A column of a table needs to stay in one line (HTML/CSS/Javascript)
• CSS: limit element to 1 line

वास्तव में मेरे सवाल का वास्तव में पहले एक के समान है, लेकिन जब से लिंक मर चुका है मैं अध्ययन नहीं कर सकते यह। दोनों उत्तरों white-space: nowrap का उपयोग करने के लिए कहते हैं। हालांकि यह काम नहीं करता है, शायद मुझे कुछ याद आ रहा है।

जब से मैं आप कोड नहीं दिखा सकते हैं, मैं इस समस्या reproduced:

<style type="text/css"> 
td { 
    white-space: nowrap; 
    overflow: hidden; 
    width: 125px; 
    height: 25px; 
} 
</style> 

<div style="width:500px"> 
<table> 
    <tr> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
     <td>lorem ipsum here... blablablablablablablablablabla</td> 
    </tr> 
</table> 
</div> 

white-space बिना तालिका 500px चौड़ा है, और पाठ एक से अधिक पंक्ति लेता है।

लेकिन white-space: nowrap ब्राउज़र को width निर्देश को केवल अनदेखा करता है और तालिका की चौड़ाई बढ़ाता है जब तक कि सभी डेटा एक पंक्ति में फिट न हो जाए।

मैं क्या गलत कर रहा हूं?

Answer 1

ओवरफ़्लो केवल तभी काम करेगा जब यह जानता है कि इसे ओवरफ़्लोइंग पर विचार करना शुरू करना है। आप की तालिका की शैली को table-layout: fixed; width:500px; जोड़ने <td>

TAKE 2

कोशिश चौड़ाई और ऊंचाई विशेषता निर्धारित करने की जरूरत है।

अद्यतन 3

पुष्टि की यह काम किया:

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

आप तालिका चौड़ाई जोड़ने के लिए सुनिश्चित करने के लिए कि अगले संपत्ति फिट होगा की जरूरत है: http://jsfiddle.net/e3Eqn/

Answer 2

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

Answer 3

अपने स्टाइलशीट के लिए निम्न जोड़ें:

table { white-space: nowrap; }

Answer 4

<table border="1" style="width:200px"> 
 
<tr> 
 
    <td>Column 1</td><td>Column 2</td> 
 
</tr> 
 
<tr> 
 
    <td nowrap="nowrap"> 
 
    
 
\t \t Single line cell just do it</td> 
 
    <td> 
 
\t 
 
\t \t multiple lines here just do it</div></td> 
 
</tr> 
 
</table>

सरल और उपयोगी।