Сделать кнопки одинакового размера независимо от поддержки текста/кросс-браузера

Question

Я создал JSFiddle, в котором он отображает 6 кнопок и текст внутри каждого. То, что я пытаюсь сделать, - выяснить, почему в Chrome это выглядит прекрасно, в котором все кнопки будут соответствовать размеру самой большой кнопки (той, которая больше всего текста), в то время как на других браузерах кнопки не совпадают: http://jsfiddle.net/tXS6w/432/

<table class=buttons> 
<tr> 
    <td><button type="button">Hello there my name is bob and this is a test </button> 
    <td><button type="button">B</button> 
    <td><button type="button">C</button> 
    <td><button type="button">D</button> 
    <td><button type="button">E</button> 
     <td><button type="button">F</button> 
</table> 

CSS

.buttons { 
    width: 100%; 
    table-layout: fixed; 
} 
.buttons button { 
    width: 100%; 
    height: 100%; 
    white-space: normal; 
} 

Answer 1

Возможное решение Flexbox

.buttons { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.buttons tr { 
 
    display: flex; 
 
} 
 
.buttons tr td { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
button { 
 
    flex: 1; 
 
}

<table class=buttons> 
 
    <tr> 
 
    <td> 
 
     <button type="button">Hello there my name is bob and this is a test</button> 
 
    </td> 
 
    <td> 
 
     <button type="button">B</button> 
 
    </td> 
 
    <td> 
 
     <button type="button">C</button> 
 
    </td> 
 
    <td> 
 
     <button type="button">D</button> 
 
    </td> 
 
    <td> 
 
     <button type="button">E</button> 
 
    </td> 
 
    <td> 
 
     <button type="button">GF</button> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Использование px вместо %. Например:

width: 50px; height: 20px; 

Answer 3

Когда вы установите ширину с помощью CSS в процентах, это будет процент от размера содержащего элемента. В этом случае <td>. Поскольку они не имеют определенной ширины, размер может быть непредсказуемым. Кажется, что некоторые браузеры будут одинаково распределять ячейки, а другие - нет. Как сказал @Mumeltier, если вы зададите размер в px вместо процента, который будет работать. Но я предполагаю, что вы не хотели бы жестко кодировать размер в px. Таким образом, один из вариантов было бы установить ширину ячеек таблицы, чтобы быть 1/6-ой размер стола:

.buttons tr td { 
    width: 16.66667%; 
} 

не установлен браузер, который иллюстрирует проблему вы имеете, так что я «На 100% не уверен, что это решение сработает для вас.