HTML / CSS table looks different in Internet Explorer and Chrome : I'm trying to create a heatmap using html, css, javascript. 
I got everything working perfect... in Chrome. In Internet Explorer, the table cells are 3-4 times taller, so the table looks weird. The picture below shows how it looks in Chrome.
[![enter image description here][1]][1]


This picture is from Internet Explorer
[![enter image description here][2]][2]


  [1]: https://i.stack.imgur.com/caDHB.png
  [2]: https://i.stack.imgur.com/IiOXI.png

This is my css.

    table {
        tr th {
          vertical-align: middle;

          &.xLabel {
            text-align: center;
          }
          &.yLabel {
            text-align: right;
          }

        }

        tr {

          td {
            color: white;
            text-align: center;
            vertical-align: middle;
            height: 30px;
          }

        }
    }

Does anyone have an idea for a fix?