Horizontal scroll bars in tables

In the following code,

<table id=\"preview_table\" class=\"preview_table\" cellspacing=\"0\" border=\"1\" width=\"%s\"><tr  bgcolor=\"lightgrey\" width=\"%s\"><th>Category</th>
<th>Grade</th>
<th>Grade</th>
<th>Grade</th>
<th>Grade</th><th>Grade</th>
<th>Grade</th>
<th>Grade</th>
<th>Grade</th>
<th>Grade</th>
 <th>Grade</th>
 <th>Grade</th>
 </开发者_高级运维tr><tr><th></th>
<th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
 </table>

In the above table how to fix the table width such that the horizontal scroll bar doesnt appear in the browser and the cells are equally aligned for what ever the size it has the contents

Thanks..

Set the table-layout to fixed and then set the width of the table as well (table-layout will only work when the width is explicitly set). The following CSS should do the trick:

<style type="text/css">
.preview_table {
 table-layout:fixed;
 width:100%; // You may need to change this depending on padding/margins/etc
}
</style>