Styling a table layout fixed & fixed width columns + colspan

css, html-table

Solution

You could add a couple of `col` tags after the opening `<table>` tag and set the width on those:

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

Problem

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'm trying to set a fixed table layout and have a fixed width on each column, however, since I have `colspan` above the fixed columns, then I'm not able to set the width. How can I achieve this?

Original source

Related problems