Estoy buscando una forma de fijar el tamaño de un button, sin importar el tamaño del texto que tenga adentro, ya que van a ser números que no van a pasar de 3 cifras
Les dejo un ejemplo para que vean de lo que hablo (también en 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>