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?
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>