CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Sean Johnson
Sean Johnson

Reputation: 353

Preventing Bootstrap 3 responsive tables from flattening content into a single line

How can I prevent the row height from changing to 1 line when the window is made narrow enough for the scroll bar to appears in a table in a "table-responsive" div. If the table contains a lot of text, it makes it very hard to read when narrow. Is there some way to set a minimum number of columns for a row? I tried the quick and dirty solution of adding line breaks to the first entry in a row, but that didn't work the lines all still flattened, but there were a few lines of whitespace added under.

example:

<div class="table-responsive">
<table class="table">
                    <div class="highlight">
                        <h4>Morbi nec metus. Phasellus blandit leo ut odio.</h4>
                    </div>
                    <thead>
                        <tr>
                            <th class="col-xs-1"></th>
                            <th class="col-xs-3">Column 1</th>
                            <th class="col-xs-6">Column 2</th>
                            <th class="col-xs-1">Column 3</th>
                            <th class="col-xs-1">Column 4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>(1)</td>
                            <td>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper lib</td>
                            <td>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper lib <a href="">link</a></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>(2)</td>
                            <td>Etiam rhoncus. Maecenas tempus,</td>
                            <td>llus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, p</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>(3)</td>
                            <td>Etiam rhoncus. Maecenas tempus,</td>
                            <td>adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonu</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>(4)</td>
                            <td>tellus eget condimentum</td>
                            <td>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
</div>

http://jsfiddle.net/YhmDE/

Upvotes: 1

Views: 2905

Answers (3)

Christina
Christina

Reputation: 34652

DEMO: http://jsbin.com/udAZAva/1/edit

@media (max-width: 767px) {
    
  .my-responsive-table-wrapper {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }

  .my-responsive-table-wrapper > .my-table > thead > tr > th,
  .my-responsive-table-wrapper > .my-table > tbody > tr > th,
  .my-responsive-table-wrapper > .my-table > tfoot > tr > th,
  .my-responsive-table-wrapper > .my-table > thead > tr > td,
  .my-responsive-table-wrapper > .my-table > tbody > tr > td,
  .my-responsive-table-wrapper > .my-table > tfoot > tr > td {
    white-space: normal;
  }
}

Upvotes: 1

adminprotools
adminprotools

Reputation: 21

Use nowrap on the header. To apply to all header columns simply add the style

th {
    white-space: nowrap;
}

Upvotes: 2

chtaylor
chtaylor

Reputation: 16

Maybe consider a condensed table.

<div>
    <table class="table table-condensed">

http://jsfiddle.net/Gbrby/

Upvotes: 0

Related Questions