title: How to remove space between column headers and their below row in a HTML table?
body: <p>I styled a HTML table like this</p>
  
  <p><a href="https://i.stack.imgur.com/LbcMR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LbcMR.png" alt="enter image description here"></a></p>
  
  <p>I want to remove space between table column headers and their below row. I tried various tricks but nothing worked. Please note that I am also using Eric Meyer's Reset CSS v2.0.</p>
  
  <p>I want to remove this red marked space without disturbing others.</p>
  
  <p><a href="https://i.stack.imgur.com/nOuYw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nOuYw.png" alt="enter image description here"></a></p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#tbstud {
    width:700px;
    margin:50px auto;
    border-collapse:separate;
    border-spacing:2px;
   }
    
   .column_heading {
    background-color:#d9e5f0;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    color:#000;
    font-weight:bold;
    height:20px;
    line-height:20px;
    padding:10px;
    text-align:center;
   }
    
   .customer_row td {
    padding:15px;
    background-color:#f5f7f9;
   }
    
   .customer_row td:first-child {
    border-left:3px solid #2585fe;
    border-radius:5px 0 0 5px
   }
   
   .customer_row td:last-child {
    border-radius:0 5px 5px 0
   }
    
   #tbstud .customer_row:nth-child(2) td:last-child {
    border-radius:0 0 5px 0
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://meyerweb.com/eric/tools/css/reset/reset.css" /&gt;
  
  &lt;table id="tbstud"&gt;
          &lt;tr&gt;
              &lt;th&gt;Sr. No.&lt;/th&gt;
              &lt;th class="column_heading"&gt;Roll No.&lt;/th&gt;
              &lt;th class="column_heading"&gt;Name&lt;/th&gt;
              &lt;th class="column_heading"&gt;Class&lt;/th&gt;
              &lt;th class="column_heading"&gt;Address&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr class="customer_row"&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;101&lt;/td&gt;
              &lt;td&gt;Sam&lt;/td&gt;
              &lt;td&gt;MSc&lt;/td&gt;
              &lt;td&gt;Delhi&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="customer_row"&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;102&lt;/td&gt;
              &lt;td&gt;Amit&lt;/td&gt;
              &lt;td&gt;BCA&lt;/td&gt;
              &lt;td&gt;Mumbai&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="customer_row"&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;103&lt;/td&gt;
              &lt;td&gt;Rahul&lt;/td&gt;
              &lt;td&gt;BCA&lt;/td&gt;
              &lt;td&gt;Delhi&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="customer_row"&gt;
              &lt;td&gt;4&lt;/td&gt;
              &lt;td&gt;104&lt;/td&gt;
              &lt;td&gt;Neha&lt;/td&gt;
              &lt;td&gt;BA&lt;/td&gt;
              &lt;td&gt;Pune&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="customer_row"&gt;
              &lt;td&gt;5&lt;/td&gt;
              &lt;td&gt;105&lt;/td&gt;
              &lt;td&gt;Pooja&lt;/td&gt;
              &lt;td&gt;B.Tech.&lt;/td&gt;
              &lt;td&gt;Chandigarh&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I still need gap between each row and each cell. But just need to remove this gap between very first row and below its row.</p>