How to set the size of a column in a bootstrap responsive table

How do you set the size of a column in a bootstrap responsive table? I don't want the table to lose its useful features I need it to work on ie8 as well I have included html5shiv and respond.

I'm using Bootstrap 3 (3.2.0)

<div class="table-responsive">
    <table id="productSizes" class="table">
        <thead>
            <tr>
                <th>Size</th>
                <th>Bust</th>
                <th>Waist</th>
                <th>Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>6</td>
                <td>79 - 81</td>
                <td>61 - 63</td>
                <td>89 - 91</td>
            </tr>
            <tr>
                <td>8</td>
                <td>84 - 86</td>
                <td>66 - 68</td>
                <td>94 - 96</td>
            </tr>
        </tbody>
    </table>
</div>

Bootstrap 4.0

Be aware of all migration changes from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex , and drop the xs to allow bootstrap to automatically detect the viewport.

<div class="container-fluid">
    <table id="productSizes" class="table">
        <thead>
            <tr class="d-flex">
                <th class="col-1">Size</th>
                <th class="col-3">Bust</th>
                <th class="col-3">Waist</th>
                <th class="col-5">Hips</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-1">6</td>
                <td class="col-3">79 - 81</td>
                <td class="col-3">61 - 63</td>
                <td class="col-5">89 - 91</td>
            </tr>
            <tr class="d-flex">
                <td class="col-1">8</td>
                <td class="col-3">84 - 86</td>
                <td class="col-3">66 - 68</td>
                <td class="col-5">94 - 96</td>
            </tr>
        </tbody>
    </table>

bootply

Bootstrap 3.2

Table column width use the same layout as grids do; using col-[viewport]-[size] . Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example.

        <thead>
            <tr>
                <th class="col-xs-1">Size</th>
                <th class="col-xs-3">Bust</th>
                <th class="col-xs-3">Waist</th>
                <th class="col-xs-5">Hips</th>
            </tr>
        </thead>

Remember to set the <th> elements rather than the <td> elements so it sets the whole column. Here is a working BOOTPLY .

Thanks to @Dan for reminding me to always work mobile view ( col-xs-* ) first.