CODEWITHSUNDEEP
twitter-bootstrap
Bart Friederichs
Bart Friederichs

Reputation: 33573

Add horizontal scrollbar in table cell within container

I have a <div class="container"> with <table class="table"> inside, which looks good. Until the cells become to wide, then the table expands to the full size of the contents.

<div class="container">
    <table class="table">
        <tr>
            <td>Caption</td>
            <td>Some very long string that makes the contents to overflow, actually mich like this actual example in StackOverflow.
            </td>
        </tr>
    </table>
</div>

I would like to have a horizontal scrollbar when contents are wider then the container (actually like StackOverflow does...).

How do I do that? Add style="overflow-x: scroll" on the <td> doesn't do anything.

Upvotes: 0

Views: 319

Answers (1)

Rounin
Rounin

Reputation: 29511

  1. Give the .container a max-width.
  2. Then apply the overflow style rule to .container.

Example:

.container {
max-width: 400px;
overflow-x: scroll;
}

Upvotes: 2

Related Questions