Question

A couple of hours ago I upgraded from Bootstrap 3.0.3 to 3.1.1, and all of my tables have suddenly collapsed horizontally to minimum width. Earlier today this table displayed fine, taking up the full width of the .container object

<div class="table-responsive">
    <table class="table table-striped table-condensed" id="intakes_header">
        <caption class="h2">Annual Intakes [1]</caption>
        <thead style="height: auto;" id="intakes_head" class="intakes_targets in">
            <tr>
                <th>School Year</th>
                <th>Referred By</th>
                <th>Exit Date</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody style="height: auto;" id="intakes_body" class="intakes_targets col-sm-12 in">
            <tr>
                <td>2013-14</td>
                <td>SAFE House</td>
                <td>-</td>
                <td><a href="https://localhost/EPHY/index.php/familyschoolyear/3827/edit" class="btn btn-default btn-sm" \=""><span class="glyphicon glyphicon-pencil"></span></a></td>
            </tr>
        </tbody>
    </table>
</div>

Now the <caption> runs the full width, but the columns are the minimum size necessary to display the content, and the headers don't even align with the column content beneath them. The really weird part is that I've been experimenting with adding col-md-X classes, and if I add a set that add up to 12 the columns display normally, but otherwise they remain squished, i.e.

<tr>
    <th class='col-sm-3'>School Year</th>
    <th class='col-sm-3'>Referred By</th>
    <th class='col-sm-3'>Exit Date</th>
    <th class='col-sm-2'>&nbsp;</th>
</tr>

displays as squished together as it does without the classes, but

<tr>
    <th class='col-sm-3'>School Year</th>
    <th class='col-sm-3'>Referred By</th>
    <th class='col-sm-3'>Exit Date</th>
    <th class='col-sm-3'>&nbsp;</th>
</tr>

spreads them out without a hitch. This has affected every table I've looked at in my application since the upgrade.

Obviously I should be able to make tables spread out by manually adding the column classes, but that also locks me into fixed proportions of width, which isn't always appropriate depending on what records are returned to fill the tables. I'm just trying to figure out what happened here to (apparently) break the tables. Any suggestions on what to check?

No correct solution

OTHER TIPS

Remove class "col-sm-12" from tbody to make it tabular.

I've been going after my code with a flamethrower and seem to be narrowing this down. I'm coming to the conclusion that the problem is not related to upgrading Bootstrap, timing aside; the display problems are arising in areas where I'm using the Collapse component, which had been working fine on Friday, but when I excise them the display returns to normal. If I can figure out what's going on I'll report back.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top