<!DOCTYPE html> <html> <head> <style> /** This is just for coloring: */ table { border: 1px solid #CC0; } td { border: 1px solid #CCC; } table { width: 100%; table-layout: fixed; } #first { width: 300px; } </style> </head> <body> <p> This play with table-layout:fixed; and applying the width to colgroup or col element. Firefox only recongize the width if it is applied on col element!</p> <p> On a perfect browser, both tables should look the same</p> <dl> <dt>colgroup</dt> <dd>300 px width is applied to the first colgroup element</dd> </dl> <div style="width: 400px;"> <table> <colgroup id="first" /></colgroup> <colgroup id="second"/></colgroup> <colgroup id="third" /></colgroup> <tr> <td>Very long?</td> <td>#</td> <td>$</td> </tr> </table> </div> <dl> <dt>col</dt> <dd>Each colgroup has an additional col element. The first col element is applied the 300 px width</dd> </dl> <div style="width: 400px;"> <table> <colgroup><col id="first" /></colgroup> <colgroup><col id="second"/></colgroup> <colgroup><col id="third" /></colgroup> <tr> <td>Very long?</td> <td>#</td> <td>$</td> </tr> </table> </div>