title: Fixed width for table first column
body: <p>I have a basic table with scrollable body. Doing that I had to set thead and tbody display:block and I also set the width for th and td.</p>
  
  <p>For some reason the first column th doesn't line up with the first column tds.
  Can anyone tell me what causes that?</p>
  
  <p>CSS</p>
  
  <pre><code> thead,
   tbody {
    display: block;
   }
  
   thead {
    text-align: left;
   }
  
   tbody {
    background: yellow;
    overflow-y: auto;
    height: 6em;
   }
  
   thead th,
   tbody td {
    width: 4em;
    padding: 2px;
   }
  
   thead tr th:first-child,
   tbody tr td:first-child {
    width: 8em;
    background: salmon;
    font-weight: normal;
   }
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/karin/9poumsyp/#&amp;togetherjs=nM5PwPmcVe" rel="noreferrer">Fiddle</a></p>