CODEWITHSUNDEEP
cssscrollbar
HelmBurger
HelmBurger

Reputation: 1298

Force show vertical scroll bar on table

I am trying to force-show vertical scroll bar on my table. Here is my code:

<div style="height:95%;overflow:auto;">
   <table id="myTable" data-tableName="myContent" style="border: 1px solid black; width: 100%; overflow:auto;">
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
   </table>
</div>

Please note that I have already tried overflow: scroll, overflow-y: scroll (with !important) along with a couple of other solutions but it doesn't work. I am using Chrome on Mac OS.

Upvotes: 1

Views: 2769

Answers (2)

Rupal
Rupal

Reputation: 1109

You have used height in %. height can'be used in % if it is not in respect of something. So here you have to use height or max-height in pixels to work. Or if you want to make it percentage just make it absolute and its parent div relative so that it will take that percent of height with respect to its parent.

<div style="max-height:100px;overflow-y:scroll ">
   <table id="myTable" data-tableName="myContent" style="border: 1px solid black; width: 100%;">
      <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
       <tr>
        <td>Content 1</td>
        <td>Content 2</td>
      </tr>
   </table>
</div>

Height in percentage works like:-

  <div style="height:200px;position:relative">
   <div style="height:50%;position:absolute;overflow-y:scroll ">
       <table id="myTable" data-tableName="myContent" style="border: 1px solid black; width: 100%;">
          <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
           <tr>
            <td>Content 1</td>
            <td>Content 2</td>
          </tr>
       </table>
    </div>
  </div>

Upvotes: 0

dmuensterer
dmuensterer

Reputation: 1885

Some version of OSX hide scrollbars when not needed. They probably hope to make the webpage slicker. Try including this in your CSS file:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

JSFiddle

Source

Upvotes: 3

Related Questions