Cross-browser compatible scrollable table

Question

I am trying to make a table that takes up 50% of the screen. However, if there is more info than the table can hold, it should be scrollable. I have been trying many different ways to do this, but none I have found worked. It needs to be cross-browser compatible with all modern browsers and preferably older browsers to. How can I do this? Thanks in advance! Note: I am using w3.css Some code I have tried:

table {
  height: 100px;
  overflow-y: scroll;
}

<table class="w3-table-all">
<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Johnson</td>
    <td>67</td>
  </tr>
</tbody>
</table>

I have tried doing that but it still doesn't work. I also tried various combinations thereof, styling the tbody, tr, td, etc. None showed a scrollbar

Post some code, something that shows what you're doing - at least post a sample table, so that we don't have to make one to help you. Create a code-snippet. And what do you mean it doesn't work in "all browsers"? Create container for the table with `overflow-y` set to `scroll` — junkfoodjunkie, Nov 11 '16 at 03:01
I'm voting to close this question as off-topic because SO is here to help you with markup you wrote but not write markup for you. — Rob, Nov 11 '16 at 03:01
Sorry for not including a code snippet. Let me edit it quickly @Rob — HittmanA, Nov 11 '16 at 03:03

score 1 · Accepted Answer · answered Nov 11 '16 at 03:19

1

First put your table inside a div then put your specified height and the overflow to the class of that div so that it will become scrollable.

CSS

.table-scroll {
  border: 1px solid #000;
  width:50%;
  height: 100px;
  overflow-y: scroll;
}

HTML

<div class="table-scroll">
<table class="w3-table-all">
<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
<tbody>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>67</td>
</tr>
</tbody>
</table>
</div>

Here is a reference in jsfiddle.

answered Nov 11 '16 at 03:19

user3771102

558
2
8
27

Looks good, one question though: is there a way to do it with fixed headers? – HittmanA Nov 11 '16 at 03:52
If that is what you were looking for in the first place then you should have searched in google first because there are a lot of ways to do that using different types of language. Read this so that you would understand how to code it. http://stackoverflow.com/a/17380697/3771102 – user3771102 Nov 11 '16 at 05:24
I did. Unfortunately I did not find that. – HittmanA Nov 11 '16 at 14:18

Cross-browser compatible scrollable table

1 Answers1