Центрированная табличная компоновка с столбцами одинаковой ширины с использованием CSS?

Question

На веб-странице у меня есть строка кнопок отправки.

• Этот ряд кнопки должны быть сосредоточен на странице
• Каждой кнопка должна быть столь же широко, как самая широкой кнопка (т.е. без фиксированной/жестко закодированных ширин кнопки).

Это легко сделать с помощью <table>, но, как люди продолжают говорить мне, что это плохо для вас, я подумал, можно ли это сделать с помощью CSS. Итак, я попытался display: table и table-cell классов CSS, но либо кнопки не получают одинаковую ширину или подпись самой длинной кнопки отсекается:

.button-row { 
    display: table; 
    margin: auto; 
    table-layout: fixed; 
} 
.button-row button { 
    white-space: nowrap; 
    display: table-cell; 
    width: 50%; 
} 

<div class="button-row" > 
    <button>Short caption</button> 
    <button>A much longer caption</button> 
</div> 

На самом деле, это выглядит правильно в IE, но не в Chrome и Firefox. Вот скрипка и с моей table- и CSS-попыткой:

http://jsfiddle.net/kfwhpre8/

Если возможно, я хотел бы избавиться от width: 50% настроек, так как количество кнопок может меняться, но это достаточно легко вычислять.

Answer 1

Глядя на ваш скрипку, имейте в виду, что в версии СТОЛ buttons содержатся в td с. В этом суть проблемы. Похоже, что использование table-cell на кнопках напрямую проблематично. Если вы не возражаете chaniging ваш HTML, вы можете попробовать:

<div class="button-row"> 
    <div> 
     <button>Short caption</button> 
    </div> 
    <div> 
     <button>A much longer caption</button> 
    </div> 
</div> 


.button-row { 
    display: table; 
    margin: auto; 
    table-layout: fixed; 
} 

.button-row>div { 
    display: table-cell; 
    width: 50%; 
} 

.button-row button { 
    width:100%; 
} 

Fiddle

Answer 2

проб не ответ, который вы ищете, как вы сказали, что вы хотите, чтобы избавиться от width:50%

Если вы установите width:100% в все кнопки button-row button{} будет иметь ширину самой широкой кнопки

.button-row button { 
    display: table-cell; 
    width: 100%; 
} 

Answer 3

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

По крайней мере, в текущей форме HTML.

.button-row button { 
    display: table-cell; 
    width: 150px; 
    margin: 1px; 
} 

Fiddle: http://jsfiddle.net/kfwhpre8/3/