title: Setting width of table cell contents based on available width
body: <p>I have an HTML table whose cells contain, among other things, spans, like this:</p>
  
  <pre><code>...
  &lt;td&gt;
      &lt;span style="height: 20px; width: 20px; margin-left: 2px;"&gt;
      &lt;span style="height: 20px; width: 20px; margin-left: 2px;"&gt;
      &lt;span style="height: 20px; width: 20px; margin-left: 2px;"&gt;
  &lt;/td&gt;
  ...
  </code></pre>
  
  <p>I'm looking for a way to shrink the width of those spans, rather than line wrap them, when the containing table cell is too narrow to show them all on one line. I tried playing around with setting the spans' <code>max-width</code> to <code>20px</code> and then using a percent for the width, but that does not work because the table cell tries to be only as wide as its contents.</p>
  
  <p>The minimum table cell width would be the width needed to display the header on 1 line.</p>
  
  <p>For the visual types, here's what I currently have when there is enough width:</p>
  
  <p><img src="https://i.stack.imgur.com/7ivbk.png" alt="enter image description here"></p>
  
  <p>Here's what I currently have when there is not enough width:</p>
  
  <p><img src="https://i.stack.imgur.com/47OPT.png" alt="enter image description here"></p>
  
  <p>And here's what I would like it to look like when there is not enough width for each span to be a full 20px:</p>
  
  <p><img src="https://i.stack.imgur.com/FXKaE.png" alt="enter image description here"></p>
  
  <p>In case it's not obvious, the spans are the colored squares in the <code>TXEs</code>, <code>RDBs</code>, and <code>RavenNets</code> columns.</p>