Force html table to use colgroup widths -

Force html table to use colgroup widths -

here sample: jsfiddle

i have table 3 columns. each should have 500px. table resized fit within parent div (600px).

the width of table should 1500 (3x500) , scrollbar should displayed in parent div. how can resolve without adding "width=xxx"???

<div id="container"> <table id="table"> <colgroup> <col style="width: 500px"></col> <col style="width: 500px"></col> <col style="width: 500px"></col> </colgroup> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </table>

apply min-width table tag (it doesn't work on col explained in comment on op).

updated css:

#table { table-layout:fixed; margin:3px; border-collapse:collapse; min-width: 1500px; }

tested in chrome , firefox, , should supported (according caniuse).

edit i've realised reply doesn't reply question, works around col tag problem rather solving it. hope helps anyway though.

table width html-table