Making wide table fit bootstrap container

Question

I have a table like so:

Answer 1

Adding style to the <td> seemed to fix this

<td style ="word-break:break-all;">

Answer 2

Try applying class="row" for the <tr> elements.

Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows.

-- Bootstrap css docs

note that Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding, so you might want to apply class=container-fluid for the table or a parent of it.

Answer 3

I fixed the same issue by changing <div class="container">...</div> to <div class="container-fluid">...</div>

Answer 4

I think this is what you are trying to achieve?

A table inside a panel-body that doesn't overflow due to the panel-body padding?

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel-body">
                <table class="table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>A</th>
                            <th>B</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>1</td><td>2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/52VtD/4215/

and your full sample:

http://jsfiddle.net/52VtD/4216/

Answer 5

You must add this class to the container so it will be like this:

<div class="table-responsive fixed-table-body">

OR

<div class="table-responsive table-body">