Заставить таблицу HTML использовать 100% доступной ширины

Question

У меня странная проблема, в которой мне стыдно признаться.Смотрите все это здесь: http://jsfiddle.net/Sorcy/ng2by/1/

Моя проблема в том, что вторая (очень маленькая) таблица должна фактически растягиваться на всю ширину контейнера.Когда я смотрю на него с помощью firebug, он делает это (поэтому синий прямоугольник справа, который на самом деле является фоновым цветом таблицы), но сами строки растягиваются только настолько, насколько это необходимо для размещения содержимого.

Поскольку я не хочу, чтобы большая синяя коробка рядом с моими столами, как мне заставить эту вещь растягиваться на всю ширину?Никакое количество настроек ширины для таблиц не принесло мне ничего, и, поскольку я не могу заранее знать, сколько столбцов будет в моей таблице, настройка ширины ячеек также не может быть рассмотрена.

Единственное решение, которое яДо сих пор пишется небольшой Javascript, который просматривает таблицы, подсчитывает столбцы и устанавливает ширину каждого на лету, но, конечно, я бы хотел, чтобы решение для чистого CSS было намного лучше.

Редактировать:

По запросу изображение того, как оно должно выглядеть:

Прямая ссылка для увеличения изображения

Answer 1

Я считаю, что основная проблема заключается в следующем:

table {
    display: block;
}

Если вы измените свойство display для таблиц, вы в основном просите браузер игнорировать эту таблицу и обрабатывать ее как обычный элемент,таким образом приводя к непредсказуемым причудам.

Я не знаю, что вы пытались достичь, но вполне возможно, что возможно , что вы действительно хотели:

table {
    border-collapse: collapse;
}

Этот атрибут делаетлегче выполнять определенные визуальные проекты.

Обновление № 1: Темную линию после последней строки таблицы можно выполнить с помощью этого простого стиля:

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

Обновление № 2: Чтобы получить темную линию после ячеек последней строки, замените это:

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

... на это:

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