td class, очень запутанно, чем больше число, тем меньше ширина?

Это не проблема как таковая, но я хотел бы знать, что происходит, чтобы я мог понять Это. В настоящее время я кодирую новый веб-сайт, который требует от меня использования одной таблицы в нижнем колонтитуле дизайна. (Я нечасто их использую, но эта таблица значительно упрощает жизнь для этого проекта.)

Я использую класс CSS для таблиц td с единственным элементом width:%; но по какой-то причине я просто не могу понять, увеличение% с 10% до 20% фактически делает ширину td меньше. совсем назад.

Я действительно озадачен этим, кто-нибудь может это объяснить?

HTML:

SHOPPING


CUSTOMER SERVICE


PAYMENT OPTIONS


SOCIAL


ORDER




​

CSS:

.footertable { margin:auto; max-width:1080px;}
td.footer {width:10%;}​

Примечания:

• Странное поведение происходит для процентов ниже 24: от 15 до 23 общая ширина уменьшается, а от 23 до 24 резко увеличивается. Для процентов выше 24 у вас нормальное поведение.
• Неважно, указываете ли вы максимальную ширину или просто ширину таблицы.
• Проблема воспроизводится в chrome, firefox, Opera и IE9
• jsFiddle здесь: http://jsfiddle. net/BPygA/