Adjust table cells in Bootstrap to content - html

Question

I have a table using Bootstrap, where the content of each table cell is a button. I want the width of each cell to be the width of the button plus margin. I tried resizing using <td class="col-md-1"> but this makes no difference.
Is there a way of resizing the width with Bootstrap?
This is the HTML:
<table class="table table-bordered">
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">1</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">2<br>ABC</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">3<br>DEF</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">4<br>GHI</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">5<br>JKL</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">6<br>MNO</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">7<br>PQRS</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">8<br>TUV</button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">9<br>WXYZ</button></td>
</tr>
<tr>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs"><<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">0<br></button></td>
<td class="col-md-1"><button type="button" class="btn btn-primary btn-xs">Clr<br></button></td>
</tr>
Thanks

Answer 1

You can add a width to the table like this (assuming you add id="phone-table" to your <table>):
#media (min-width:767px) {
#phone-table{
width:20%;
}
}
#media (max-width:768px) {
#phone-table{
width:40%;
}
}
I used media queries so that the table maintains responsiveness and won't be too large or small on any screen.
Bootply Demo