CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3responsive
jos
jos

Reputation: 45

Can't get a Scrollable pre inside bootstrap 3 table

I want a html pre element that is inside a bootstrap table cell to be scrollable.

I have this Code:

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="info">
            <th class="col-xs-2">Title</th>
            <th class="col-xs-10">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-xs-2">Title</td>
            <td class="col-xs-10">
               <pre style="width:100%; overflow: scroll;"> Very Long Preformated Description </pre>
            </td>
        </tr>
    </tbody>
</table>

That actualy expands the pre element outside the screen.

I would like the cell to keep its col-xs-10 size and show scrollable bars on the pre element

Upvotes: 1

Views: 510

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

How does this look? https://codepen.io/panchroma/pen/KQOXzK

There's a native Bootstrap 3 class for scrollable tables, you wrap the table as below: 

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

More info at http://bootstrapdocs.com/v3.3.6/docs/css/#tables-responsive

====

Here's another version with the scroll bar on the table cell in question, and the entire table stays visible in the viewport: https://codepen.io/panchroma/pen/pLzWWv

The important bit is that I've wrapped the <pre> element in a div with a set width and overflow-x: auto;. The full css and HTML is also below.

Good luck!

HTML

<div class="table-wrap">
  <table class="table table-striped table-bordered table-hover">
    <thead>
        <tr class="info">
            <th class="col-xs-2">Title</th>
            <th class="col-xs-10">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-xs-2">Title</td>
            <td class="col-xs-10">
               <div class="pre-wrap">
                 <pre> Very Long Preformated Description Very Long Preformated Description </pre
                 </div>
            </td>
        </tr>
    </tbody>
  </table>
</div>

CSS 

.pre-wrap{
  overflow-x: auto; /* this creates the horizontal scroll bar */
  width:calc(83vw - 10px); /* set the width of this element to the width of col-xs-10 less a little padding */
  background-color:pink;
  border:1px solid red;
}

.table-wrap{
/*   margin optional, to help with illustration only */
  margin:10px;
}

Upvotes: 1

Related Questions