Fixed-size columns

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 开发者_StackOverflowand 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?

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>

You can try using 'min-width': '120px'

Though not really practical, you could try wrapping the width in double quotes and adding !important to it like so

{css: {'text-align': 'left',  width: "360px !important"      }, children: 'Comments'}

I think your problem is that you're giving the browser conflicting dimensions. You say that the <table> elements are set at 800px wide but your three columns only add up to 640px. You're going to need to add another 160px somewhere. With other column sets you'll have to make sure the column widths sum to 800px.

You can try using table-layout: fixed on your <table>. That should force the issue and stop any feedback you might be getting between the table and its cells.