Tạo kiểu bảng bố trí các cột cố định và cố định chiều rộng + colspan

Question

Tôi có bố cục sau đây.

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

Tôi đang cố gắng để thiết lập một bố trí bàn cố định và có chiều rộng cố định trên mỗi cột, tuy nhiên, kể từ khi tôi có colspan trên các cột cố định, sau đó tôi không thể thiết lập chiều rộng. Làm thế nào tôi có thể đạt được điều này?

Answer 1

Bạn có thể thêm một vài col thẻ sau thẻ mở <table> và thiết lập chiều rộng trên những:

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