How to make an HTML table scroll able both horizontally and veritcally

Question

I have created a table with 20 columns and 10 rows . Now I am trying to make it scroll able both in height and width. But there is a lot of problem occurring like the thead of the table is wider than the tbody and the columns of the thead are not matching. Here is the code . HTML:-

table.scroll {
  width:100%;
}

table.scroll tbody,
table.scroll thead {
  display: block;
}

table.scroll tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

<div class="maincontainer" style="height:40">

  <table class="scroll" style="width: 100%; height: 486px;" border="1px" bordercolor="#9CB3BD" cellspacing="0px">

    <thead position:fixed>
          <tr style="height: 83px;">
          <th style="width: 249px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; STUDENT-ID</td>
          <th style="width: 34px; height: 83px;">&nbsp;S.NO</td>
          <th style="width: 198px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; STUDENT NAME</td>
          <th style="width: 11px; height: 83px;">&nbsp;L</td>
          <th style="width: 11px; height: 83px;">U&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 11px; height: 83px;">&nbsp;</td>
          <th style="width: 12px; height: 83px;">&nbsp;</td>
          <th style="width: 12px; height: 83px;">&nbsp;</td>
          <th style="width: 12px; height: 83px;">&nbsp;</td>
          <th style="width: 13px; height: 83px;">&nbsp;</td>
          <th style="width: 13px; height: 83px;">&nbsp;</td>
      </tr>
    </thead>
    <tbody>
      <tr style="height: 23px;">
        <td style="width: 249px; height: 23px;">15-14-065</td>
        <td style="width: 34px; height: 23px;">1</td>
        <td style="width: 198px; height: 23px;">Anisul Islam</td>
        <td style="width: 11px; height: 23px;">L</td>
        <td style="width: 11px; height: 23px;">U</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 11px; height: 23px;">&nbsp;</td>
        <td style="width: 12px; height: 23px;">&nbsp;</td>
        <td style="width: 12px; height: 23px;">&nbsp;</td>
        <td style="width: 12px; height: 23px;">&nbsp;</td>
        <td style="width: 13px; height: 23px;">&nbsp;</td>
        <td style="width: 13px; height: 23px;">&nbsp;</td>
      </tr>

I've [edited](https://stackoverflow.com/posts/45169230/edit) your question to include a runnable snippet, however it's riddled with errors. Your ``, ``, and `
` are missing their closing tags. Also, all of your `
` tags. Please resolve these issues.
` have `` tags instead of ` — Tyler Roper, Jul 18 '17 at 14:13
Your question must have a [Minimal, Complete, Verifiable Example](https://stackoverflow.com/help/mcve). If the example you're providing us is full of errors, then it's not *complete*, nor *verifiable*, nor *reproducible*. — Tyler Roper, Jul 18 '17 at 14:18
Possible duplicate of [HTML table with fixed header and footer and scrollable body without fixed widths](https://stackoverflow.com/questions/37272331/html-table-with-fixed-header-and-footer-and-scrollable-body-without-fixed-widths) — Heretic Monkey, Jul 18 '17 at 14:20
There are hundreds of questions on this topic. Please search, and if you don't think a particular question is a duplicate, [edit] your answer to make it clear how it doesn't meet your needs. — Heretic Monkey, Jul 18 '17 at 14:21
there are code errors , but to answer your question you can use overflow:auto on the table — Fenici, Jul 18 '17 at 14:30

score 0 · Answer 1 · answered Jul 18 '17 at 15:45

Although @Santi is correct, it goes beyond just missing closing tags and mismatching others, your css isn't formatted well. Check out my example below which gets your code to scroll:

CSS:

<style>
    table.scroll {
        min-width:100%;
        height: 200px;
        overflow:auto;
        border: solid 1px #9CB3BD;
        border-spacing: 0px;
        border-collapse: collapse;
    }

    table, th, td {
        border: solid 1px gray;
        padding: 20px;
    }
</style>

HTML:

<table class="scroll">
    <thead>
        <tr>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>             
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
          <th>Hello, I am a table header</th>
            </tr>
    </thead>

    <tbody>
      <tr>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>        
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
        <td>Hello, I am table data</td>
      </tr>
    </tbody>
</table>

How to make an HTML table scroll able both horizontally and veritcally

1 Answers1