CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Alejandro Veintimilla
Alejandro Veintimilla

Reputation: 11573

Table not respecting Bootstrap Grid

I'm having a hard time trying to understand why the table I have doesn't respect bootstrap's grid system. It took me about 2 hours to isolate and be able to update the error. Please help.

I'll post the code, but I think you will understand the error more easily looking at this fiddle and the full-screen result. Isn't the table supposed to respect Bootstrap's grid system?

  <div class="col-md-8 border">
<div class = "table-responsive">
<table class = "table">
<thead>
<tr>
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>AACccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</td>
<td>$1.38</td>
<td>-0.01</td>
<td>-0.36%</td>
<td>$1.39</td>
<td>$1.39</td>
<td>$1.38</td>
</tr>
</tbody>
</table>
</div>  
</div> <!--col-md-8-->

<div class="col-md-4 border">
    <div class="alert alert-dismissable alert-info">
        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat
    </div>
</div>

Upvotes: 1

Views: 934

Answers (2)

Devin
Devin

Reputation: 7720

Well, it does, but you have several issues in your code:

1) You must load Bootstrap.js

2) Your table is really narrow for your columns, so yo must use a wider column or edit the cutting point

3) you can cut some of the padding to allow for more space.

4) your nowrap text doesn't help at all and it won't happen in the wild (and if so, you can force wrap)

5) You need some special code for Firefox

All that being said, I made this fiddle, see code below

HTML

<div class="container">
    <div class="row">
        <div class="col-md-9 border">
            <div class="table-responsive">
                <table class="table table-striped table-condensed table-responsive">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Company</th>
                            <th>Price</th>
                            <th>Change</th>
                            <th>Change %</th>
                            <th>Open</th>
                            <th>High</th>
                            <th>Low</th>
                            <th>Volume</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>AACccccccccccccccccccccccccccccccccccc asd asdasd asdasdasdads adasd asdasdasd asdasd</td>
                            <td>$1.38</td>
                            <td>-0.01</td>
                            <td>-0.36%</td>
                            <td>$1.39</td>
                            <td>$1.39</td>
                            <td>$1.38</td>
                            <td>$1.38</td>
                            <td>$1.38</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--col-md-3-->
        <div class="col-md-3 border">
            <div class="alert alert-dismissable alert-info">At vero eoset accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat</div>
        </div>
    </div>
</div>

and CSS (only to fix Firefox issues as per Bootstrap guide)

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

Upvotes: 3

Yooz
Yooz

Reputation: 2518

The problem in your example is the one word first cell. The CSS does not break one word by default. To change that add in you TD style

word-break: break-word;

Then define a percentage width for your TD

word-break: break-word;
width:15%;

http://jsfiddle.net/e9qhcvsw/8/

However, be careful, bootstrap adds the following media query on small width :

@media (max-width: 767px)
.table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
   white-space: nowrap;
}

Which will stop the word-break effect, so you need to override it or not use the table-responsive.

Finally, I would highly recommend to use a responsive grid instead of a table.

Upvotes: 2

Related Questions