एचटीएमएल सीएसएस

Question

का विस्तार करने से तालिका कक्ष को कैसे रोकें मेरे पास एक सारणी है जो लौटाए गए डेटासेट से आने वाली सामग्री के साथ बनाई गई है। मैं जो करना चाहता हूं वह 'विवरण' सेल को 280px चौड़े से अधिक विस्तार से रोकना है, इससे कोई फर्क नहीं पड़ता कि सामग्री की लंबाई (इसकी स्ट्रिंग) क्या है। मैंने कोशिश की है:

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" > 

लेकिन यह काम नहीं प्रतीत होता है। मैं इसे लपेटना नहीं चाहता, न ही मुझे 280px से अधिक कुछ प्रदर्शित करना चाहिए।

Answer 1

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

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;"> 
    [content] 
</td> 

नई एचटीएमएल

<td> 
    <div class="MyClass""> 
     [content] 
    </div> 
</td> 

सीएसएस वर्ग:

.MyClass{ 
    height: 280px; 
    width: 456px; 
    overflow: hidden; 
    white-space: nowrap; 
} 

Answer 2

<table border="1" width="183" style='table-layout:fixed'> 
    <col width="67"> 
    <col width="75"> 
    <col width="41"> 
    <tr> 
    <td>First Column</td> 
    <td>Second Column</td> 
    <td>Third Column</td> 
    </tr> 
    <tr> 
    <td>Row 1</td> 
    <td>Text</td> 
    <td align="right">1</td> 
    </tr> 
    <tr> 
    <td>Row 2</td> 
    <td>Abcdefg</td> 
    <td align="right">123</td> 
    </tr> 
    <tr> 
    <td>Row 3</td> 
    <td>Abcdefghijklmnop</td> 
    <td align="right">123456</td> 
    </tr> 
</table> 

मैं जानता हूँ कि यह पुराने स्कूल है, लेकिन दे कि एक कोशिश है, यह काम करता है।

भी इस जोड़ सकते हैं:

<style> 
    td {overflow:hidden;} 
</style> 

बेशक

, तो आपको एक अलग जुड़ा हुआ स्टाइलशीट में रखते हैं, और नहीं इनलाइन ... आप नहीं होगा;)

Answer 3

आप कर सकते हैं एक टेबल-सेल (td) की चौड़ाई को नियंत्रित न करें जब तक कि आप div जैसे कंटेनर नियंत्रण के अंदर अपनी सामग्री को लपेटें। निम्नलिखित jQuery फ़ंक्शन प्रत्येक टीडी की सामग्री को div के अंदर लपेट देगा।

function WrapTableCellsWithDiv(tableId) 
{ 
    $('#' + tableId + ' tbody tr td').each(function() 
    { 
     //get corresponding th of this td 
     var tdIndex = $(this).index(); 
     var th = $('#' + tableId + ' thead tr th:nth-child(' + (tdIndex + 1) + ')'); 
     var thWidth = $(th).width(); 

     //wrap the contents of td inside a div 
     var tdContents = $(this).html(); 
     var divTag = '<div style="width: ' + thWidth + '">' + tdContents + '</div>'; 
     $(this).html(divTag); 
    }); 
} 

यह फ़ंक्शन div टैग के अंदर प्रत्येक td तत्व की सामग्री लपेट होगा। div टैग की चौड़ाई संबंधित th तत्व की चौड़ाई पर सेट की जाएगी।

नमूना तालिका संरचना:

<table id="SampleTable"> 
    <thead> 
     <tr> 
      <th style="width: 90px;">FirstName</th> 
      <th style="width: 90px;">LastName</th> 
      <th style="width: 60px;">Age</th> 
      <th style="width: 70px;">Gender</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John</td> 
      <td>Smith</td> 
      <td>25</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Ted</td> 
      <td>Eddie</td> 
      <td>22</td> 
      <td>Male</td> 
     </tr> 
     <tr> 
      <td>Angel</td> 
      <td>Mike</td> 
      <td>23</td> 
      <td>Female</td> 
     </tr> 
    </tbody> 
</table> 

Answer 4

कोई जावास्क्रिप्ट, बस सीएसएस। ठीक काम करता है!

.no-break-out { 
     /* These are technically the same, but use both */ 
     overflow-wrap: break-word; 
     word-wrap: break-word; 

     -ms-word-break: break-all; 
     /* This is the dangerous one in WebKit, as it breaks things wherever */ 
     word-break: break-all; 
     /* Instead use this non-standard one: */ 
     word-break: break-word; 

     /* Adds a hyphen where the word breaks, if supported (No Blink) */ 
     -ms-hyphens: auto; 
     -moz-hyphens: auto; 
     -webkit-hyphens: auto; 
     hyphens: auto; 

    } 

Answer 5

यह उपयोगी हो सकता है के रूप में इस सवाल का जवाब ऊपर सिर्फ सीएसएस है:

td { 
    word-wrap: break-word; 
}