Question

I have a jQuery plugin that creates, fills and formats tables. I already have the creating and the filling right, but the formatting still eludes me.

The tables are always 800px wide (to make my life simple, I designed my Web site that way; I am a mostly left-brained guy, music being the only kind of art I can understand and produce), but the number of columns and their individual properties (title, width, alignment) are variable:

$
.grid('MostSoldBySales', 'Most sold products by total sales', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Sales'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
.grid('MostSoldByWeight', 'Most sold products by total weight', 112 /* height in px */, [
    {css: {'text-align': 'left',  width: 120/*px*/}, children: 'Description'},
    {css: {'text-align': 'right', width: 160      }, children: 'Total Weight'},
    {css: {'text-align': 'left',  width: 360      }, children: 'Comments'}
])
;

My main problem is related to the column widths: I desperately need a way to make my columns exactly as wide as specified. I don’t want the browser to resize the columns for any reason. I think that is a feature even Visual Basic provided. How do I do that using CSS?

Answer 1

One sure-fire way I know is to put DIVs inside each TD. The width you specify for a TD is only taken as a suggestion (even in modern browsers), and the columns will squash down if the window’s too narrow. So this will always be rigidly 200px wide:

<table>
  <tr>
    <td>
      <div style="width:200">Some stuff</div>
    </td>
  </tr>
</table>