One of the biggest things I've run into with Bootstrap are their tables which are dynamic and grow and shrink depending on content size. For the most part this is completely desired. Every now and then you want a bit more control over your table column widths. This is a very simple trick that I wanted to document for those who have run into the problem of wanting more control than Bootstrap gives initially.
Say you've created your table as shown below.
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Number</th>
<th>Standard</th>
<th>Category</th>
<th>Labs</th>
<th>Description</th>
<th>Min. Sample Size</th>
</tr>
</thead>
<tbody>
{% for test in tests %}
<tr>
<td>{{ test.number }}</td>
<td>{{ test.name }}</td>
<td>{{ test.category }}</td>
<td>{{ test.labs }}</td>
<td>{{ test.description }}</td>
<td>{{ test.minimum_sample }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Let's say once you render this table the description for the test is way too big and is pushing the other columns away and making them smaller than you think they should be. The quickest way to fix this is to simply give column sizes to your table headers. Whatever the width of your table headers your table data will conform to that size. Knowing this we can alter the above example to make description take up less space and give a little bit more to other columns.
<table class="table table-condensed table-striped">
<thead>
<tr>
<th class="col-sm-1">Number</th>
<th class="col-sm-2">Standard</th>
<th class="col-sm-2">Category</th>
<th class="col-sm-2">Labs</th>
<th class="col-sm-3">Description</th>
<th class="col-sm-2">Min. Sample Size</th>
</tr>
</thead>
<tbody>
{% for test in tests %}
<tr>
<td>{{ test.number }}</td>
<td>{{ test.name }}</td>
<td>{{ test.category }}</td>
<td>{{ test.labs }}</td>
<td>{{ test.description }}</td>
<td>{{ test.minimum_sample }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Super simple. Works great. Give it a try. The biggest request I've had, that I have yet to find an answer for, is how to stop the overflow for a table data and show ellipsis instead using Bootstrap. It's a simple enough procedure in HTML but Bootstrap is doing something else that doesn't allow the overflow. If anyone knows how to keep a table data on one line and have it show ellipsis please leave a comment.