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

Question

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

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

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

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

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

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

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

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

Спасибо!

Answer 1

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

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

вы можете использовать 14% для элементов «· сутки»:

DEMO

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Ваших ячейки таблицы ширина по отношению к ширине родителей, но родители с этим авто/не определенно. Добавьте width: 100%; к вашему определениюcss для правильного поведения.