I've got a little webpage I've been working on for the fun of it, but there is an undesired result.

There are 2 tables that by default show up with the columns aligned, as I desire. They both have 100% page width, and the cells within share the same specified width. The final cell does not have a width specified so that it can expand if the page width is increased thus keeping the table at 100% of the page width. No heights are specified so cells can grow infinitely if needed.

**Table 1:**

```
<!-- box_sorting -->
<table style="z-index:2;position:fixed;top:196px;margin-top:0px;margin-left:auto;margin-right:auto;margin-bottom:0px;width:100%;min-width:1200px;background-color:#CCC;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-top:solid;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
 <tr>
    <td width="75">Track</td>
    <td width="300">Song</td>
    <td width="300">Album Artist</td>
    <td width="300">Album</td>
    <td width="100">Genre</td>
    <td width="75">Rating</td>
    <td>Comments</td>
  </tr>
</table>

```

**Table 2:**

```
<!-- box_tracklisting -->
<table style="z-index:1;position:relative;top:216px;margin-top:0px;margin-left:auto;margin-right:auto;width:100%;min-width:1200px;text-align:center;vertical-align:middle;font:12px Arial, Helvetica, sans-serif;color:#333;word-wrap:break-word;border-left:solid;border-size:1px;border-color:#CCC" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="75">1 of 11</td>
    <td width="300"><a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/67810795&amp;color=ff5500&amp;auto_play=true&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false" target="player">Believer</a></td>
    <td width="300">American Authors</td>
    <td width="300">Oh, What A Life</td>
    <td width="100">Indie</td>
    <td width="75">Good</td>
    <td></td>
  </tr>

```

The problem I'm having is that if the browser width decreases the top table shrinks too much, and no longer aligns with the bottom table. How can I prevent this?

**How It Looks Normally:**

![proper](https://i.stack.imgur.com/pqG37.png)

**How It Looks When Browser Window Width Is Reduced:**

![improper](https://i.stack.imgur.com/vloic.png)

I'm using Mozilla Firefox, but I would prefer an answer that is compatible with the 5 major browsers: Internet Explorer, Mozilla Firefox, Google Chrome, Opera, and Safari. The page is optomized for viewing at a width of greater than 1200px. If you view it with a browser window of less than that there will be a horizontal scrollbar.