1

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

user94628
  • 3,641
  • 17
  • 51
  • 88

1 Answers1

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

Dan
  • 9,391
  • 5
  • 41
  • 73
  • So, do I include @media in a custom CSS file that's called after the bootstrap css file? – user94628 Aug 01 '14 at 19:33
  • Great thanks....and I can play about with the width sizes to get the desired effect? – user94628 Aug 01 '14 at 19:34
  • Yes, and you can find information on the native bootstrap pixel width break points here: http://stackoverflow.com/questions/19592968/bootstrap-3-breakpoints-and-media-queries – Dan Aug 01 '14 at 19:36