table columns does not show up in resize - html

Question

I have three tables......
The first table is not given margin left.....
where as the next two tables i have given margin-left to move it slightly on the left side....
but when i resize the window i am not able to see the last column in other two tables....
how to fix it....
the first table looks fine even even after resize......
http://jsfiddle.net/x7HD9/
providing my code below
<table class="table" style="margin-left: 160px; width: 1759px;">
<thead>
<tr class="subBomListHeading subBomHeading" style="">
<th>BOM Type</th>
<th>Product P/N</th>
<th>Version</th>
<th>Brand Name</th>
<th>BOM Description</th>
<th>Generation</th>
<th>Version</th>
<th>Notes</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #e5dcd1;" class=" subBom">
<td>sub BOM</td>
<td>99-00302-00</td>
<td>v.02</td>
<td>Creative</td>
<td>Hardware v1.0 System</td>
<td>G1</td>
<td>1</td>
<td>new</td>
<td><input type="radio" name="sex" value="male"></td>
</tr>
</tbody>
</table>

Answer 1

Try :
<table class="table" style="margin-left: 160px; width: 100%;">
Also, keep in mind that <tables> are not 'responsives' (has in 're-layout'), but still 'extensibles'.
Your table is displayed at it's minimum width, it's normal you don't see the last column, it overflows the viewport.

Answer 2

Im going to assume you have width: 100% set on your tables, thats your problem, they are set as the width of the window and then moved right so you cant see the last column, You should change the width to a lower value.

Answer 3

You have a couple problems here.
First, you've defined a fixed width to the tables. Depending on how the overflow property is set on ancestor elements, it can cause the clipping you describe because the element is too wide for that space. It's unclear as to how wide you want these elements to be, but something like this would do the trick:
table.brown {
min-width: 80%; /* or just plain `width: 80%` */
}
Ultimately, there will come a point where you won't be able to resize because the contents of the table simply won't allow it. Once your cells are down to 1 word wide, there's not much you can do to help longer words like "Description" without adding word-break: break-all.
Second, you want to use a different setting for your margins if you want to push it in a particular direction. Using auto as the value for margin-left would cause the element to shift all the way to the right.
table.brown {
margin-left: auto;
}
http://jsfiddle.net/x7HD9/3/

Answer 4

There's way too much CSS for me to even try and comprehend. I think starting from scratch with just a table and then gradually add CSS would be a good idea.