How to add scroll bar on table?

Question

I am trying to add a scroll bar on my table but its not showing up on the table. I have tried to put my table in div as well. Here is my code:

  <table class="table-condensed  table-hover table-bordered"  id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important;  position: absolute;left: 52px;Top:100px">
    <thead>
        <tr>
            <th>Eligibility Reports</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <img src="images/reports.png" class="icon" style="margin: 1px;" />
                <a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
                <br/>
                <p align="left">This report provides a list of SR IDs where<br/> duplicated or overlapping coverage is present.</p>
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/reports.png" class="icon" style="margin: 1px;" />
                <a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
                <br />
                <p align="left">This report provides a list of Open Batches<br/> for a given date range by Batch Type.</p>
            </td>
        </tr>
        <tr>
            <td>
                <img src="images/reports.png" class="icon" style="margin: 1px;" />
                <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
                <br />
                <p align="left">This report provides a list of Refund Details<br/> for a given Bid Year and Client Number.</p>
            </td>
        </tr>
    </tbody>
</table>

I have tried to put overflow property in CSS

what is the css of your table?

vaso123
– vaso123

2014-11-11 16:39:51 +00:00
Commented Nov 11, 2014 at 16:39 — vaso123
– vaso123, Commented Nov 11, 2014 at 16:39

Casey Rule · Accepted Answer · 2014-11-11 16:52:37Z

1

You need to do two things. First, you have to wrap your table in a container that will do the scrolling, like this:

<div style="height: 200px; overflow: auto;">
   <table>
       ...
   </table>
</div>

And you have to remove position: absolute from the style of the table.

Here's an example: http://jsfiddle.net/qbkfbrwd/

Hope that helps!

Edit If instead you only want the body of the table to be able to scroll, it's as simple as adding the following CSS:

tbody {
    display: block;
    height: 200px; //or whatever you want the height to be
    overflow: auto;
}

Example: http://jsfiddle.net/f91pzj6d/

edited Nov 11, 2014 at 16:52

answered Nov 11, 2014 at 16:41

Casey Rule

2,0952 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ahmad Over a year ago

But its scrolling my header as well

Casey Rule Over a year ago

Ah I see, you just want the table body to scroll. Let me revise my answer.

Casey Rule Over a year ago

There we go! Let me know if that's what you're looking for.

jjlema · Accepted Answer · 2014-11-11 16:42:26Z

0

Create a div with:

<div id="myTable">

and in css:

myTable {    
  overflow:auto;  
}

answered Nov 11, 2014 at 16:42

jjlema

8605 silver badges8 bronze badges

Comments

user2019037 · Accepted Answer · 2014-11-11 16:46:17Z

I add a div as container and use overflow: auto. You have also to set a height for your table:

#tableContainer {
  overflow: auto;
  height: 200px;
  position: relative;
  width: 300px;
}

<div id="tableContainer">
  <table class="table-condensed  table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important;  position: absolute;left: 52px;Top:100px">

    <thead>
      <tr>
        <th>Eligibility Reports</th>
      </tr>

    </thead>


    <tbody>

      <tr>
        <td>
          <img src="images/reports.png" class="icon" style="margin: 1px;" />
          <a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
          <br/>
          <p align="left">This report provides a list of SR IDs where
            <br/>duplicated or overlapping coverage is present.</p>
        </td>
      </tr>

      <tr>
        <td>
          <img src="images/reports.png" class="icon" style="margin: 1px;" />
          <a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
          <br />
          <p align="left">This report provides a list of Open Batches
            <br/>for a given date range by Batch Type.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="images/reports.png" class="icon" style="margin: 1px;" />
          <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
          <br />
          <p align="left">This report provides a list of Refund Details
            <br/>for a given Bid Year and Client Number.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="images/reports.png" class="icon" style="margin: 1px;" />
          <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
          <br />
          <p align="left">This report provides a list of Refund Details
            <br/>for a given Bid Year and Client Number.</p>
        </td>
      </tr>
      <tr>
        <td>
          <img src="images/reports.png" class="icon" style="margin: 1px;" />
          <a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
          <br />
          <p align="left">This report provides a list of Refund Details
            <br/>for a given Bid Year and Client Number.</p>
        </td>
      </tr>

    </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

How to add scroll bar on table?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related