Making html table use 100% of available width

I have a strange problem that I'm actually ashamed to admit. See the whole thing here: http://jsfiddle.net/Sorcy/ng2by/1/

My problem is: the second (very small) table should actually stretch the whole width of the container. When I look at it with firebug it does (therefore the blue box to the right, which is actually the background color of the table), but the rows themselves only stretch as far as they have to to accommodate the content.

Since I don't want a big blue box beside my tables, how do I get this thing to stretch the whole width? No amount of setting width for tablerows has brought me anything, and since I can not know beforehand how many columns my table is gonna have, setting a width for the cells is also out of the question.

Only solution I have so far is writing a small Javascript that goes through the tables, counts the columns and sets the width of each on the fly, but of course I'd like a pure CSS solution much b开发者_StackOverflow社区etter.

Edit:

As requested, an image of how it is supposed to look:

Direct link for bigger image

I believe the main problem is this:

table {
    display: block;
}

If you change the display property for tables, you are basically asking the browser to ignore it's a table and handle it as a regular element, thus leading to unpredictable quirks.

I don't know what you were trying to accomplish but it's possible that you really wanted this:

table {
    border-collapse: collapse;
}

This attribute makes it easier to accomplish certain visual designs.

Update #1: A dark line after the last row of the table can be done with this simple style:

table {
    /*background-color: #001F66;*/
    border-bottom: 1px solid #001F66;
}

Update #2: To get a dark line after the cells of the last row replace this:

table tr:last-child td { border-bottom: none; }

... with this:

table tr:last-child td { border-bottom: 1px solid #001F66; }