Я ищу способ установить размер кнопки независимо от размера текста внутри, так как это будут числа, которые не превысят 3 цифры
Вот пример, чтобы вы могли видеть, о чем я говорю (также в jsfiddle ):
.table-mesas {
float: left;
width: 95.8%;
}
.table-mesas tr td {
padding: 15px;
}
.butt-mesas {
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 1px 1px 15px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 30px 40px;
background: #88dd77;
border: solid #000000 1px;
text-decoration: none;
width: 100%;
}
.butt-mesas:hover {
background: #9ae288;
text-shadow: 1px 1px 15px #666666;
text-decoration: none;
}
<table class="table-mesas">
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">100</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
<tr>
<td><button class="butt-mesas">1</button></td>
<td><button class="butt-mesas">2</button></td>
<td><button class="butt-mesas">3</button></td>
<td><button class="butt-mesas">4</button></td>
<td><button class="butt-mesas">5</button></td>
</tr>
</table>
Вы можете попробовать установить фиксированную ширину и высоту, а также «высоту строки», равную установленной вами высоте, чтобы текст отображался в центре вертикально. Кроме того, text-align: center, чтобы центрировать текст по горизонтали.
Надеюсь, я помог. Всего наилучшего.