Change column width bootstrap tables

Question

I have a static PHP site I'm using Bootstrap on. The tables are controlled by Bootstrap.

I've noticed that I have seemingly no control over the lengths of the TD sections so that I can prevent the phone numbers, etc..., from wrapping. As you can see there is plenty of space on the end, just don't know how to spread that space out.

I tried inline widths on the <th> but nothing happens:

  <table class="table table-condensed table-striped  table-hover">
  <thead>
    <tr>
        <th>#</th>
        <th width="12%">Last Name</th>
        <th width="12%">First Name</th>
        <th width="12%">Spouse's Name</th>
        <th width="20%">Address</th>
        <th width="5%">City</th>
        <th  width="12%"class="did_phone">Phone</th>
        <th width="15%">E-Mail</th>
         <th width="15%"></th>
    </tr>
  </thead>
  <tbody>

So... how does one change the <td> widths, make adjustments so there is no wrapping, in Bootstrap?

Answer 1

Bootstrap makes tables 100%. So Tables th is set to 100%. The solution is to make it auto. So I simply overrode Bootstrap by adding the following to my css:

table th {
    width: auto !important;
}

And everything lined up perfectly.

Answer 2

You could try using this style="width:12%" in each th.

Example:

<table class="table table-bordered">
 <thead>
 <tr>
    <th>#</th>
    <th style="width:12%">Last Name</th>
    <th style="width:12%">First Name</th>
    <th style="width:12%">Spouse's Name</th>
    <th style="width:20%">Address</th>
    <th style="width:5%">City</th>
    <th  style="width:12%"class="did_phone">Phone</th>
    <th style="width:15%">E-Mail</th>
 </tr>
 </thead>
 <tbody>
    <tr>
        <td>1</td>
        <td>Last Name</td>
        <td>First Name</td>
        <td>Spouse's Name</td>
        <td>Adress</td>
        <td>City</td>
        <td>Phone</td>
        <td>E-Mail</td>
    </tr>
 </tbody>
</table>