How to adjust table height and width within container and add horizontal and vertical scroll bars in to avoid overflow?

Question

I added adjust height and width in table tag and set the overflow-x and overflow-y property to 'auto' But of them seems to not working and table overflows. I have tried this to implement but it is not working in my code. If there is some mistake or something is missing in code please help me to solve this.

<style>
    table {
        max-width: 600px;
        max-height: 400px;
        border-spacing: 0;
        display: block;
    }
    
    tbody {
        overflow-y: auto;
        overflow-x: auto;
    }
    
    th {
        /*display: block;*/
        border: 1px solid #293033;
        position: sticky;
        top: 0;
        text-align: center;
        padding: 8px;
        color: #e9ecef;
        background-color: #1e2324;
        font-weight: 500;
        font-size: 14px;
    }
    
    td {
        background-color: #041230;
        border: 1px solid #293033;
        text-align: center;
        padding: 8px;
        color: #e9ecef;
        min-width: 150px;
        font-size: 13px;
        word-spacing: 2px;
    }
    
    td:nth-child(1) {
        min-width: 50px;
        max-width: 50px;
        font-weight: bold;
        color: #66FCF1;
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resCSS.css">

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<script src="https://cdn.fancygrid.com/fancy.min.js"></script>

<div class="container">
    <table class="tablecolor2">
        <!-- class="tablecolor" -->
        <thead>
            <tr>
                <th>#</th>
                <th>Dummy</th>
                <th>dvfdgdg</th>
                <th>fvfdgfd/fdgdg</th>
                <th>Cdumm</th>
                <th>sdfdgds</th>
                <th>Cd</th>
                <th>Ankjfdksf</th>
                <th>jnknk</th>
                <th>fdfdgdfg</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
            <tr>
                <td>1</td>
                <td>cdfdfsdfs</td>
                <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
                <td>ILorem ipsum, or lipsum as it is sometimes </td>
                <td>known, is </td>
                <td>dummy text used in laying out print, </td>
                <td>N/A</td>
                <td>graphic or web </td>
                <td>N/A</td>
                <td>designs. The passage is attributed to an unknown </td>
            </tr>
        </tbody>
    </table>
</div>

Roko C. Buljan · Accepted Answer · 2020-04-19T20:12:13.743

Based on this answer:

Don't overflow tbody, instead overflow a parent DIV
Don't use display: block; on a table.

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.tableFixHead          { overflow: auto; }
.tableFixHead thead th { position: sticky; top: 0; }

/* CUSTOM SIZE */
.tableFixHead {
  height: 90vh; /* or whatever */
  min-width: 600px;
}

/* OTHER STYLES */
table { border-spacing: 0; }
th,
td {
  text-align: center;
  padding: 8px;
  color: #e9ecef;
  border: 1px solid #293033;
}
th {
  background-color: #1e2324;
  font-weight: 500;
  font-size: 14px;
}
td {
  min-width: 150px;
  background-color: #041230;
  font-size: 13px;
  word-spacing: 2px;
}
td:first-child {
  min-width: 50px;
  font-weight: bold;
  color: #66FCF1;
}

<div class="container tableFixHead">
  <table class="tablecolor2">
    <thead>
      <tr>
        <th>#</th>
        <th>Dummy</th>
        <th>dvfdgdg</th>
        <th>fvfdgfd/fdgdg</th>
        <th>Cdumm</th>
        <th>sdfdgds</th>
        <th>Cd</th>
        <th>Ankjfdksf</th>
        <th>jnknk</th>
        <th>fdfdgdfg</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
      <tr>
        <td>1</td>
        <td>cdfdfsdfs</td>
        <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
        <td>ILorem ipsum, or lipsum as it is sometimes </td>
        <td>known, is </td>
        <td>dummy text used in laying out print, </td>
        <td>N/A</td>
        <td>graphic or web </td>
        <td>N/A</td>
        <td>designs. The passage is attributed to an unknown </td>
      </tr>
    </tbody>
  </table>
</div>

score 1 · Answer 2 · answered Apr 19 '20 at 19:25

Like that?

<!DOCTYPE html>
<html>

<head>

  <style>
    table {
      max-width: 600px;
      max-height: 400px;
      border-spacing: 0;
      display: block;
    }
    
    tbody {
      overflow-y: auto;
      overflow-x: auto;
    }
    
    th {
      /*display: block;*/
      border: 1px solid #293033;
      position: sticky;
      top: 0;
      text-align: center;
      padding: 8px;
      color: #e9ecef;
      background-color: #1e2324;
      font-weight: 500;
      font-size: 14px;
    }
    
    td {
      background-color: #041230;
      border: 1px solid #293033;
      text-align: center;
      padding: 8px;
      color: #e9ecef;
      min-width: 150px;
      font-size: 13px;
      word-spacing: 2px;
    }
    
    td:nth-child(1) {
      min-width: 50px;
      max-width: 50px;
      font-weight: bold;
      color: #66FCF1;
    }
    
    .container {
 overflow: scroll;
    }
  </style>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="resCSS.css">

  <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
  <script src="https://cdn.fancygrid.com/fancy.min.js"></script>
</head>

<body>

  <div class="container">
    <table class="tablecolor2">
      <!-- class="tablecolor" -->

      <thead>
        <tr>
          <th>#</th>
          <th>Dummy</th>
          <th>dvfdgdg</th>
          <th>fvfdgfd/fdgdg</th>
          <th>Cdumm</th>
          <th>sdfdgds</th>
          <th>Cd</th>
          <th>Ankjfdksf</th>
          <th>jnknk</th>
          <th>fdfdgdfg</th>
        </tr>
        <!-- </thead> -->
        <tbody>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>
          <tr>
            <td>1</td>
            <td>cdfdfsdfs</td>
            <td> ssdfsf dfdsgsdgsdg typesetter in the 15th century who is thought to have scrambledon </td>
            <td>ILorem ipsum, or lipsum as it is sometimes </td>
            <td>known, is </td>
            <td>dummy text used in laying out print, </td>
            <td>N/A</td>
            <td>graphic or web </td>
            <td>N/A</td>
            <td>designs. The passage is attributed to an unknown </td>
          </tr>

        </tbody>
    </table>


  </div>
  <!--  container -->
  <script src="research.js"></script>
  <script src="research2.js"></script>
</body>

</html>

Thank you so much its working. The only issue left is its layout. container has padding 15px. One side of table is not covering the padding and causing layout problem I am attaching screenshots to my question for your reference. — Ayes, Apr 19 '20 at 19:41

How to adjust table height and width within container and add horizontal and vertical scroll bars in to avoid overflow?

2 Answers2