Отзывчивая таблица кнопок с процентами

Question

Я делаю веб-калькулятор, который я создал с помощью CSS. Теперь я хочу сделать это отзывчивым, чтобы он можно было использовать на смартфонах. Ниже приводится часть моего HTML

<table class="buttonTable"> 

<tbody> 
    <tr> 
     <td> 
      <input class="button_standard" type="button" value="7"></input> 
     </td> 
     <td> 
      <input class="button_standard" type="button" value="8"></input> 
     </td> 
     <td> 
      <input class="button_standard" type="button" value="9"></input> 
     </td> 
     <td> 
      <input class="button_operator" type="button" value="÷"></input> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <input class="button_standard" type="button" value="4"></input> 
     </td> 
     <td> 
      <input class="button_standard" type="button" value="5"></input> 
     </td> 
     ... 
    </tr> 
    ... 

</table> 

То, что я пытаюсь достичь для размеров экрана около 450 пикселей и ниже, что кнопки становятся reponsive, и начать использовать проценты (было бы странно, чтобы использовать проценты для размером экрана рабочего стола, так как тогда он создавал бы кнопки шириной около 500 пикселей).

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

Я мой CSS настроить следующим образом (с указанием только соответствующие вещи):

table { 
    text-align: center; 
    margin: 10px auto; 
} 

td { 
    width: 70px; 
    height: 50px; 
    padding: 2px; 
} 

input[type="button"] { 
    width: 100%; 
    height: 100%; 
    ... 
} 

@media (max-width: 450px) { 
    td { 
     width: 25%; 
    } 

    ... 
} 

Как я хочу кнопки, чтобы быть 25% всего экрана каждого, установить ширину до 25%. Вы ожидаете, что кнопки будут составлять 25% каждый, поэтому они охватывают весь экран, но с разницей в 2 пикселя. Это то, что происходит вместо этого:

Что я упускаю, что причины этого? Я уже пробовал стилизовать сами кнопки (элементы input[type="button"]) с шириной 25%, но это было еще хуже.

Интересно, что когда ширина экрана достигает ширины таблицы, как показано выше, элементы фактически изменяются динамически, пока они не достигнут минимальной ширины, определяемой текстом внутри и тому подобное.

Я действительно не понимаю, что здесь происходит.

Answer 1

Проблема с элементом table. Он не знает, насколько он будет шире, поэтому он сделает себя как можно меньше, а затем td s будет составлять 25% от ширины таблицы.

Измените ширину table на 100%, и все будет хорошо.

Answer 2

Я бы изменил таблицу на полную ширину родительского элемента, а также на ввод, а затем поместил максимальную ширину, например, 25em-30em на родителя.

Это будет выглядеть примерно так:

table, input { 
    width:100%; 
} 
main { 
    max-width: 27.5em; 
    margin: 0 auto; 
    padding: 0 1em; // for mobile 
}