Html – Setting width of table cell contents based on available width

I have an HTML table whose cells contain, among other things, spans, like this:

...
<td>
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
</td>
...

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' max-width to 20px 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.

The minimum table cell width would be the width needed to display the header on 1 line.

For the visual types, here's what I currently have when there is enough width:

Here's what I currently have when there is not enough width:

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:

In case it's not obvious, the spans are the colored squares in the TXEs, RDBs, and RavenNets columns.