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

Is there a way for me to determine if something is hidden?

Prior to stacking the divs, separate the line within the div

Click on the submenu to expand it, then simply select the desired option to navigate

Use JavaScript to illuminate individual words on a webpage in sequence

How can a single item from each row be chosen by selecting the last item in the list with the radio button?

Insert, delete, and modify rows within the table

Convert JSON data without backslashes using json_encode

The sorting icon in jQuery Data Table's search option is not functioning

Show whether the day is even or odd with the JavaScript getDay object

How to create a vibrant and colourful full background

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

Trouble with HTML img srcset functionality?

My code is currently experiencing an issue - I'm trying to figure out how to center a

Is a webpage's sluggishness in Internet Explorer due to its lengthy page structure causing issues while loading quickly on other browsers?

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

Avoiding the application of a border-right to the final child of a div in CSS

Tips for maintaining the fixed size of a table header and preventing it from resizing in width

Track the cursor's movement

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Use CSS specifically for codeigniter viewpage