Adjust table cells in Bootstrap to content

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">&lt;<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