Having troubles in defining cell widths (they render with other width) - html

Question

I have a div of width 60% and overflow-x set to scroll.
<div style="width: 60%; overflow-x: scroll">
</div>
Inside that, I have a table with 1 row and dynamic number of cells (th's) within that row.
<div style="width: 60%; overflow-x: scroll">
<table>
<thead>
<tr>
<th style="width: 20px;">
<input type="checkbox" />
</th>
<th style="width: 300px">Name</th>
<th style="width: 300px">Email</th>
#foreach (Group group in groups)
{
<th style="width: 150px">#group.Name</th>
}
</tr>
</thead>
</table>
</div>
When this is rendered, I'm having two problems
1) The table adjusts its width to the 100% of the div. What I want is the table to be much more wider than the div. That is why the div has "overflow-x: scroll", so that the table is scrollable horizontally.
2) The cells (th's) are not rendered with the widths I gave them
Note: The "#group.Name" inside the dynamically created th's should generally have less than the 150px that I gave to the th's.
How can I solve these two problems?

Answer 1

Try <th nowrap style="..."> to force cells to widen instead of wrapping.

Answer 2

As I can see You know widths of each column, so You know total table width. If total table width is 1000px, adding :
style="width:1000px"
to table tag should solve the problem. I've tested this approach in Chrome, and it works well.

Answer 3

The cause is that you are setting width to all TDs.
When table is rendered by browser, the engine compute the widths of each TDs to match Table width.
It will distribute the overflow/missing pixels to the Table columns, squeezing or stretching them. The distribution is based by columns width (by percentage), larger columns get more larger in absolute number of pixels.
If the table has columns that don't have width specified, this distribution falls only on them, ignoring columns with explicit width.
Surely, if table is CSS computed with width: auto or no width's set, the columns stay with their size and table width will be the sum of columns size (plus table borders, etc..)
You have 2 ways to fix your table:
set table CSS width to auto.
At least 1 TD must have no width - a pivot column.
Use one of them, or both..