Diseñar un diseño de tabla columnas de ancho fijo y fijo + colspan

Question

Tengo el siguiente diseño.

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

Estoy intentando fijar un modelo de mesa fija y tienen un ancho fijo en cada columna, sin embargo, ya que tengo colspan por encima de las columnas fijas, entonces yo no soy capaz de establecer el ancho. ¿Cómo puedo conseguir esto?

Answer 1

Se podría añadir un par de col etiquetas después de la etiqueta de apertura <table> y establecer el ancho en los que:

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