bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<table id="table1">
<tr>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td><input type="number" style="text-align:center" value=15></td>
<td><input type="number" style="text-align:center" value=8></td>
</tr>
</table>

<hr>

<table id="table2">
<tr>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td><input type="number" style="text-align:center" value=15></td>
<td><input type="number" style="text-align:center" value=8></td>
</tr>
</table>

<hr>

<table id="table3">
<tr>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td><input type="number" style="text-align:center" value=15></td>
<td><input type="number" style="text-align:center" value=8></td>
</tr>
</table>

CSS

input[type='number']::-webkit-inner-spin-button, 
input[type='number']::-webkit-outer-spin-button { 
  opacity: 1;
  margin-left: -14px;
}

td {
  text-align: center;
}

#table1 input {
  width: 100px;
}

#table2 input {
  width: 400px;
}

#table3 input {
  width: 1000px;
}