Указание процентной ширины для ячеек таблицы CSS

Я пытаюсь создать календарь недели на основе HTML/CSS, используя дисплей CSS: стиль таблицы-ячейки на divs, соответствующий каждому дню. Когда я укажу процентную ширину для дневных divs, которая больше 17%, divs заполняет весь экран, как ожидалось (с 7 * 17% > 100%).

jsfiddle здесь: http://jsfiddle.net/huDxZ/1/

Однако, когда я укажу процентную ширину, равную 16% или меньше, div ведут себя совершенно по-другому, занимая только часть ширины страницы.

jsfiddle здесь: http://jsfiddle.net/DLjnH/

Я бы хотел, чтобы мои дневные divs имели ширину около 14%, поэтому они грубо заполняют ширину страницы и имеют равные размеры. К сожалению, ширина 14% выглядит еще хуже.

jsfiddle здесь: http://jsfiddle.net/YB5bY/

Что вызывает это неожиданное поведение? Есть ли способ обойти это? Мне нужно явно указать ширину, потому что в конце концов я хотел бы, чтобы дни календаря расширялись при наведении курсора мыши.

Пожалуйста, никаких решений, связанных с поплавками.

Спасибо!

Ответ 1

Значения процентных правил CSS всегда относятся к значению того же свойства родителя.
Попробуйте добавить явную ширину в контейнер:

#calendar {
    display: table;
    height:900px;
    width: 100%;
}

Вы можете использовать 14% для элементов ".day":

DEMO

Ответ 2

Я не могу сказать вам причину, но если вы заставляете контейнер div иметь 100% -ную ширину, то поведение этих двух случаев одинаково.

#calendar {
    display: table;
    height:900px;
    width: 100%;
}

Обновленная версия: http://jsfiddle.net/DLjnH/1/

Ответ 3

Ну, я могу быть сумасшедшим, но я бы использовал таблицу для такой вещи...

Не все таблицы являются злыми, только те, которые используются для макета...

Ответ 4

Ширина ячейки вашей ячейки относительно ширины родителей, но родители с auto/ undefined. Добавьте width: 100%; к вашему определению #calendar css, чтобы они правильно себя вести.