Stacking tables tables fixed and fixed width + colspan

Question

I have the following layout.

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

I am trying to set a fixed table format and have a fixed width for each column, however, since I have colspan over fixed columns, then I cannot set the width. How can I achieve this?

Answer 1

You can add a couple of col tags after opening the <table> and set the width on them:

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