Grid system not being followed by table in Bootstrap layout

Question

Grid system not being followed by table in Bootstrap layout

I'm struggling to figure out why the table I have doesn't follow Bootstrap's grid system. It took me a good 2 hours to pinpoint and fix the issue. Any help would be greatly appreciated.

I could share the code, but it might be easier for you to understand the problem by looking at this fiddle and the full-screen result. Shouldn't the table adhere to 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>AACcccccccccc... (content too long) </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...(content too long)...et doloribus asperiores repellat
    </div>
</div>

html css twitter-bootstrap

Answer 1

Answer №1

Hey there, your code does work, but there are a few things you need to address:

1) Make sure to load Bootstrap.js

2) Adjust the width of your table columns or redefine the cutting point

3) Consider reducing padding for more space.

4) The 'nowrap' text feature may not be effective and can be forced to wrap if needed

5) Specifically cater to Firefox with some additional code

Despite these notes, I have created this fiddle, where you can review the 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 (specifically for Firefox adjustments based on Bootstrap guide)

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

Answer 2

Hey there, your code does work, but there are a few things you need to address:

1) Make sure to load Bootstrap.js

2) Adjust the width of your table columns or redefine the cutting point

3) Consider reducing padding for more space.

4) The 'nowrap' text feature may not be effective and can be forced to wrap if needed

5) Specifically cater to Firefox with some additional code

Despite these notes, I have created this fiddle, where you can review the 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 (specifically for Firefox adjustments based on Bootstrap guide)

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

Answer 3

Answer №2

Your example demonstrates a common issue with the CSS default behavior of not breaking single-word cells. To rectify this, you can add the following to your TD style:

word-break: break-word;

Additionally, specify a percentage width for your TD element:

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

For reference, you can view an example at http://jsfiddle.net/e9qhcvsw/8/.

Keep in mind that Bootstrap includes a media query for small widths:

@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;
}

This may interfere with the word-break effect, so consider overriding it or avoiding the use of table-responsive if necessary.

In conclusion, it is advisable to utilize a responsive grid system instead of relying solely on tables for layout purposes.

Answer 4

Your example demonstrates a common issue with the CSS default behavior of not breaking single-word cells. To rectify this, you can add the following to your TD style:

word-break: break-word;

Additionally, specify a percentage width for your TD element:

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

For reference, you can view an example at http://jsfiddle.net/e9qhcvsw/8/.

Keep in mind that Bootstrap includes a media query for small widths:

@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;
}

This may interfere with the word-break effect, so consider overriding it or avoiding the use of table-responsive if necessary.

In conclusion, it is advisable to utilize a responsive grid system instead of relying solely on tables for layout purposes.

Grid system not being followed by table in Bootstrap layout

Answer №1

Answer №2

Similar questions

Utilizing AJAX to submit a combination of text fields and files in an HTML form

Tips for resizing an image instead of a line in HTML5 canvas

Understanding the integration of sass with webpack in an Angular 4 project

Is the `visibility: hidden` property not functioning as expected?

The getElementByID function will return null in this instance, as it has not been loaded

Having images that are too large in size and using a high percentage can

Tips for automating file uploads in HTML

JQuery Submission with Multiple Forms

checkbox toggling event triggering twice

What is the method to create a resizable table column border rather than resizing the bottom corner border?

What is the reason for the jQuery plugin not being applied after replacing the page content with an Ajax response?

What's the best way to ensure consistent spacing between a label and input field, regardless of the length of the text?

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

How to position a Bootstrap 4 button group at the bottom of a flexbox container

Using Ajax to dynamically load page content into a div based on a selection made in a

Tips for automatically scrolling to the bottom of a div when new data is added

A convenient npm tool for combining HTML files into a single document

What is the method for adding two elements to an array?

Modifying the color of the active column

What are the steps to resize a YouTube embedded video?