title: How to make <td> elements in table same height?
body: <p>I know there are many questions about this, but I have an other set-up than most people. I have a one-row table that moves with my page. See JSFiddle: <a href="https://jsfiddle.net/evk49ey1/1/" rel="nofollow noreferrer">https://jsfiddle.net/evk49ey1/1/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
      &lt;td&gt;a&lt;/td&gt;
      &lt;td id="b"&gt;b&lt;/td&gt;
      &lt;td&gt;c&lt;/td&gt;
      &lt;td&gt;d&lt;/td&gt;
      &lt;td&gt;e&lt;/td&gt;
      &lt;td&gt;f&lt;/td&gt;
      &lt;td&gt;g&lt;/td&gt;
      &lt;td&gt;h&lt;/td&gt;
      &lt;td&gt;i&lt;/td&gt;
      &lt;td id="j"&gt;j&lt;/td&gt;
      &lt;td&gt;k&lt;/td&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>td{
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
    vertical-align: top;
  background-color: #3399ff;
  height: 50px;
  width: 75px;
  border: 1px solid black;
  border-collapse: collapse;
  }
  td:nth-child(odd){
    background-color: #1177dd;
  }
  
  #b{
    height: 80px;
  }
  
  #j{
    height:90px;
  }
  </code></pre>
  
  <p>I want a css and html only solution. Thanks in advance!</p>
  
  <p>EDIT: This is what I have till now:<a href="https://jsfiddle.net/evk49ey1/3/" rel="nofollow noreferrer">https://jsfiddle.net/evk49ey1/3/</a></p>
  
  <p>The cells have all the same height, also when you change the content of one cell the others will follow along. </p>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/uVt2R.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uVt2R.jpg" alt="Screenshot"></a></p>
  
  <p>And now I want that the cells g, h, i, j and k just get an height of 50px, because they are not next to cell a which needs more height.</p>
  
  <p>This is what I want to achieve:
  <a href="https://i.stack.imgur.com/WKWJB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WKWJB.jpg" alt="Screenshot"></a></p>