title: How to make a <td> table responsive in <tr>
body: <p>I want to make a scrolling table using css but I have some trouble, when I using <code>overflow-y : auto</code> and then the <code>&lt;td&gt;</code> is overload in <code>&lt;tr&gt;</code>, for example code I put <code>HTML</code> and <code>CSS</code> code in here :</p>
  
  <p>HTML CODE : </p>
  
  <pre><code>&lt;table id="check" class="table table-fixed"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;No&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Gender&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Jax&lt;/td&gt;
          &lt;td&gt;Male&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS CODE :</p>
  
  <pre><code>#check {
   width: 70%;
   margin-top : 5%;
   margin-left: 45%;
   border-collapse: collapse;
   width: 100%;
  }
  
  #check td, #check th {
   border: 1px solid #ddd;
   padding: 8px;
  }
  
  #check tr:nth-child(even){background-color: #f2f2f2;}
  #check tr:hover {background-color: #ddd;}
  
  #check th {
   padding-top: 12px;
   padding-bottom: 12px;
   text-align: left;
   background-color: #4CAF50;
   color: white;
  }
  
  .table-fixed tbody {
   height: 250px;
   overflow-y: auto;
   margin-top: 1px;
   table-layout: fixed;
   display: block;
   overflow: auto;
  }
  .table-fixed thead tr {
   display: block;
  }
  </code></pre>
  
  <p>I also put the link for code editor online in codepen : <a href="https://codepen.io/Pro_luck_Grammer/pen/QWbPGLX?__cf_chl_captcha_tk__=276011548a504907d109a21dc09c4d86da6a9b00-1585793574-0-AQrgZ6hom7D4y9wM3kFr0yZnHDGsErI-vjW7j4gslszFwe8DdqoThVVGaBRJ7ljbxpP7gdcqf9Zfoi_0NH5sPFYuQakSclK3Cu9Y_A1HPSlqTUX2LrxR323Zphh4vePKALI2pBSg3O1JkV-fjF5SrJepnRQZu9hUWXd68B8GEWqciYpUHT0nadsz7vOGrXJ_HTyibMEkEI6z1i7o9OejFqM1NVuT7xUL5gz63N2cWS-FivDq7ojdgaIZIrTSlYdrI_V7JalDWIztLyKIlBhZdIO4WP9_eGCIlgnY-Ud1HXZzgv5cA9MroSsIeVd4kwjeWtZaxPkpWTmtzdh2hoE080LenpBeYGoRNgTANiqOdQHS-vG8gNd7MxGnXg7dBNYQ80E4YMuoLcayO_6crGkfbJ8RqiQwxLY5vlwFOWFb8WZP2UpHCqhmAnu_X35FgsrHCBLWf1OCvnMwaDBiwVa4qB0GpxhlWUcG1zyOF5GUBPt7-F2Qsux5Mp3pAhLYAi6GuxzpmY8SIkfXIpYuAJnFuW5c6_TIdcgr5lfZqFVjdWXSz9rDCz4w7KLEFdrIJabZqg" rel="nofollow noreferrer">My Code</a> </p>