Making html table use 100% of available width -

I have a strange problem that is really embarrassing to accept me. See the whole thing here:

My problem is this: The second (very small) table should spread to the full width of the container. When I see it with firebug (hence the blue box on the right, which is actually the background color of the table), but the rows are spread to itself, as if they have to adjust the content

Since I do not want a big blue box next to my tables, how do I get this thing to spread the entire width? No amount of setting width for tabulars has brought me nothing, and since I can not already know how many columns are near my desk, determining a width for cells is also out of the question.

The only solution I am writing a little javascript so far, which goes through the tables, calculates the columns and sets the width of each on the flight, but of course I have a pure CSS The solution should be very good.

Edit:

According to the request, an image of how it should look:

I believe the main problem is :

  table {display: block; }   
 If you change the  display  property for the table, you basically ignore the browser as a table and handle it as a regular element Are asking for, causing unexpected quirks.  
 I do not know what you were trying to accomplish but it is  possible  that you really wanted it:  
  table {Border -Logo: collapse; }   
 This feature makes it easy to complete some visual designs.  
  Update # 1:  After the last line, a deep line table can be done with this simple style:  
  table {/ * Background color: # 001F66; * / Border bottom: 1 px solid # 001F66; }   
  Update # 2:  To get a dark line after copying the  cell  of the last line:  
  table tr: last-child TD {border-bottom: none; }   
 ... with:  
  table tr: last-child TD {border bottom: 1px solid # 001F66; }