title: Keep aspect ratio of table
body: <p>I have a table representing coordinates.<br>
  <a href="https://i.stack.imgur.com/Vdelc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vdelc.png" alt="table with coordinates"></a></p>
  
  <p>How can I have the size dynamically changing, so it always fits the parent div (width: 100%), like an image would?</p>
  
  <p>Right now I use @media queries, which are hardcoded.
  But there must be a better way.    </p>
  
  <pre><code>.hitbox {
    width: 25%; /* of page */
  }
  
  @media (min-width: 702px) and (max-width: 800px) {
    .hitbox .tablewrapper {
      font-size: 9px;
    }
  }
  @media (min-width: 800px) and (max-width: 840px) {
    .hitbox .tablewrapper {
      font-size: 10px;
    }
  }
  @media (min-width: 840px) and (max-width: 915px) {
    .hitbox .tablewrapper {
      font-size: 11px;
    }
  }
  </code></pre>
  
  <p><strong>edit:</strong>    </p>
  
  <p>The problem if the table needs to get even smaller then the text containing is fixed text size.</p>
  
  <p><a href="https://jsfiddle.net/ucoLcm50/4/" rel="nofollow noreferrer">JSFiddle</a><br>
  This works fine.<br>
  <a href="https://i.stack.imgur.com/Joxrr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Joxrr.png" alt="Wide"></a>
  <a href="https://i.stack.imgur.com/79IoQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/79IoQ.png" alt="narrow"></a>
  But smaller then that, It doen't work.<br>
  <a href="https://i.stack.imgur.com/ZkzOB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZkzOB.png" alt="fail"></a>
  It should make the font smaller, or at least cut each of the the cells (not the table).</p>
  
  <p><strong>edit 2:</strong>
  The whole table should be visible all the time, it is not important to read the text, but to see the pattern (with colors gray or red) it creates.</p>
  
  <p><strong>edit 3:</strong>
  The importance are the colors here, not the labels, so cutting the table and making it scrolling is not a solution here. It is required that like a heat map it is always completely visible.</p>