HTML तालिका लंबा पाठ

Question

साथ काम नहीं करता मैं निम्नलिखित संरचना

<table cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE HERE 
     </div> 
    </td> 
</tr> 
... 
</table> 

पहले टीडी 60px लेता है, दूसरा एक 100% के बाकी लेता है, लेकिन जब मैं कुछ लंबी है कोई रिक्त स्थान वाला टेक्स्ट और कोई डैश नहीं होने पर तालिका 100% हो जाती है। एक लाइन में या एकाधिक लाइनों पर गैर-ब्रेक करने योग्य टेक्स्ट को कैसे प्रदर्शित करें (दोनों तरीके स्वीकार्य हैं) और तालिका को 100% स्क्रीन पर रखें? मैंने ओवरफ्लो-छुपा के साथ इसे ठीक करने का प्रयास किया है लेकिन इसका कोई प्रभाव नहीं है। यहाँ समस्या का स्क्रीनशॉट है: link

Answer 1

सेट अपने सीएसएस में table-layout : fixed या <table style='table-layout : fixed'> कि oughta इसे ठीक।

यहां code sample है। इसकी जांच - पड़ताल करें।

Answer 2

वहाँ एक CSS3 संपत्ति, word-wrap:break-word; करता है कि आप वास्तव में क्या जरूरत है। लेकिन दुर्भाग्य से यह टेबल कोशिकाओं के साथ काम नहीं करता है। मुझे लगता है कि आपको टेबल-कम डिज़ाइन का चयन करने, अपनी संरचना पर पुनर्विचार करने की आवश्यकता है।

मैं के लिए आप

<style> 
section { /* your table */ 
    display:block; 
    width:300px; 
    background-color:#aaf; 
} 
section:after {display:block; content:''; clear:left} 

div { /* your cells */ 
    float:left; 
    width:100px; 
    background-color:#faa; 
    word-wrap:break-word; 
} 
</style> 

<section> 
    <div>Content.</div> 
    <div>Loooooooooooooooooooooooooooooooooooooooong cat.</div> 
</section> 

पी.एस इस उदाहरण लिखा है: word-wrap 5.5 + IE में समर्थित है, Firefox 3.5+, और इस तरह के क्रोम और सफारी के रूप में वेबकिट ब्राउज़रों।

Answer 3

निम्न प्रयास करें:

<table style="word-break:break-all;" cellspacing="0" cellpadding="0" width="100%"> 
<tr> 
    <td style="width:60px;"> 
     ... 
    </td> 
    <td> 
     <div style="width:100%;overflow-x:hidden;"> 
      PROBLEMS ARE no longer HERE ! 
     </div> 
    </td> 
</tr> 
... 
</table>