I have a table with 2 columns and multiple rows

<table border=0 id="feed">
    <tr><td>something</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something1</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something2</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something3</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something4</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something5</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-else1</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-els2</td><td><div class="bubble"></div></td></tr>
</table>

I want to be able to scroll down without showing the scrollbar (implying that the total height of the rows exceed the 800px limit) . I am looking for a Chrome/Firefox patible fix.

Current properties of feed:

  #feed{
    display: block;height: 800px;overflow-y: scroll;
}

This only works on the chrome framework:

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

EDIT:

I tried adding a parent to the table (according to Hide scroll bar, but still being able to scroll):

#outer{
    overflow-y:hidden;
    height:800px;
}
#feed{overflow:scroll;}

HTML:

<div id="outer"><table border=0 id="feed">...</table></div>

Please note that the total height is bigger than 800px so scrolling should work. It does not, though.

I have a table with 2 columns and multiple rows

<table border=0 id="feed">
    <tr><td>something</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something1</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something2</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something3</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something4</td><td><div class="bubble"></div></td></tr>
    <tr><td style="">something5</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-else1</td><td><div class="bubble"></div></td></tr>
    <tr><td>something-els2</td><td><div class="bubble"></div></td></tr>
</table>

I want to be able to scroll down without showing the scrollbar (implying that the total height of the rows exceed the 800px limit) . I am looking for a Chrome/Firefox patible fix.

Current properties of feed:

  #feed{
    display: block;height: 800px;overflow-y: scroll;
}

This only works on the chrome framework:

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

EDIT:

I tried adding a parent to the table (according to Hide scroll bar, but still being able to scroll):

#outer{
    overflow-y:hidden;
    height:800px;
}
#feed{overflow:scroll;}

HTML:

<div id="outer"><table border=0 id="feed">...</table></div>

Please note that the total height is bigger than 800px so scrolling should work. It does not, though.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 23, 2017 at 12:03 CommunityBot 111 silver badge asked Mar 5, 2014 at 10:00 GabeGabe 97111 gold badge1010 silver badges2323 bronze badges 3

• 1 How are you expecting people to scroll (or even know that there is hidden content that can be scrolled to) without showing a scroll bar? overflow: hidden would seem to fit what you want, but it would be terrible UX. – Rory McCrossan Commented Mar 5, 2014 at 10:01
• Check this link – Mr_Green Commented Mar 5, 2014 at 10:02
• @RoryMcCrossan No, that disables the scroll capability. In the context I work in, the existence of the "hidden content" can be deducted upon scrolling a list of msgs. – Gabe Commented Mar 5, 2014 at 10:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can do it like this:

#feed{
    display: block;
    height: 100px;
    overflow-y: scroll;
    margin-right: -30px;
}

#outer{
    overflow:hidden;
}

#feed{
    display: block;
    height: 800px;
    overflow-y: hidden;
}