एक टेबल लेआउट स्टाइलिंग निश्चित और निश्चित चौड़ाई कॉलम + colspan

Question

मेरे पास निम्न लेआउट है।

<style> 
    table { width: 200px; white-space: nowrap; table-layout: fixed; } 
    .a { width:10px; overflow: hidden; text-overflow: ellipsis } 
    .b { width:190px; overflow: hidden; text-overflow: ellipsis } 
</style> 

<table border="1" style=""> 
    <tr>   
     <td colspan="2">Some content header goes in here</td> 
    </tr> 
    <tr> 
     <td class="a">This cells has more content</td> 
     <td class="b">Less content here</td> 
    </tr> 
</table> 

मैं एक निश्चित तालिका लेआउट स्थापित करने के लिए और प्रत्येक स्तंभ पर एक निश्चित चौड़ाई है, हालांकि, के बाद से मैं colspan तय कॉलमों के ऊपर है कोशिश कर रहा हूँ, तो मैं चौड़ाई सेट करने में सक्षम नहीं हूँ। इसे कैसे प्राप्त किया जा सकता है?

Answer 1

आप उन पर चौड़ाई उद्घाटन <table> टैग के बाद col टैग के एक जोड़े को जोड़ने और सेट कर सकते हैं:

<style> 
    table { width: 200px; white-space: nowrap; table-layout: fixed; } 
    .a { overflow: hidden; text-overflow: ellipsis } 
    .b { overflow: hidden; text-overflow: ellipsis } 
    .cola { width: 10px; } 
    .colb { width: 190px; } 
</style> 

<table border="1" style=""> 
    <col class="cola" /> 
    <col class="colb" /> 
    <tr>   
     <td colspan="2">Some content header goes in here</td> 
    </tr> 
    <tr> 
     <td class="a">This cells has more content</td> 
     <td class="b">Less content here</td> 
    </tr> 
</table>