1

I have implemented a scrollable table with a pinned column and vertical and horizontal scrolling enabled. I want to hide the vertical scroll which appears besides the pinned column. Here is the plunker link. My html looks like this:

<div class="col-md-12">
      <div class="col-md-3" style="padding:0;">
        <table class="table" style="margin-bottom:0;">
          <thead>
            <tr>
              <th>fixed</th>
            </tr>
          </thead>
        </table>
        <div style="height:100px; overflow-y:auto" id="fixed" on-scroll="">
          <table class="table" style="margin-bottom:0">
            <tbody>
              <tr data-ng-repeat="data in [1,2,3,4]">
                <td>data data data data data data data data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-9" style="padding:0;overflow:hidden">
        <div id="topRight" style="padding:0;overflow-x:hidden" on-scroll="">
          <table class="table" style="margin-bottom:0">
            <thead>
              <tr>
                <th style="min-width:200px">column 1</th>
                <th style="min-width:200px">column 2</th>
                <th style="min-width:200px">column 3</th>
                <th style="min-width:200px">column 4</th>
                <th style="min-width:200px">column 5</th>
              </tr>
            </thead>
          </table>
        </div>
        <div style="height:100px; overflow:auto" id="bottomRight" on-scroll="">
          <table class="table" style="margin-bottom:0">
            <tbody>
              <tr data-ng-repeat="data in [1,2,3,4]">
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
                <td style="min-width:200px">data data data data data data data data</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

Thank you

Soham Nakhare
  • 415
  • 4
  • 16

2 Answers2

0

There is no real cross-browser solution to doing this, but the best answer you can find is here:

Hiding the scrollbar on an HTML page

Answer from link

For completeness' sake, this works for webkit:

#element::-webkit-scrollbar { 
    display: none; 
}

If you want all scrollbars hidden, use

::-webkit-scrollbar { 
    display: none; 
}

I'm not sure about restoring - this did work, but there might be a right way to do it:

::-webkit-scrollbar { 
    display: block; 
}

You can of course always use width: 0, which can than be easily restored with width: auto, but I'm not a fan of abusing width for visibility tweaks.

To see if your current browser supports this, try this snippet:

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not part of the hiding itself. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  display: none;
}
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Note that this is not really a correct answer to the question because it hides the horizontal bars as well, but that's what I was looking for when Google pointed me here, so I figured I'd post it anyway.)

Community
  • 1
  • 1
m0meni
  • 14,160
  • 14
  • 66
  • 120
0

change overflow-y:hide and height is 150px

like

<div style="height:150px; overflow-y:hide"  id="fixed" on-scroll="">
    <table class="table" style="margin-bottom:0">
      <tbody>
        <tr data-ng-repeat="data in [1,2,3,4]">
          <td>data data data data data data data data</td>
        </tr>
      </tbody>
    </table>
  </div>

Link: http://plnkr.co/edit/dFE0HX7W5hWsUztc37La?p=preview

Muthukumar
  • 362
  • 1
  • 13