Filling an automatic-width table cell with a fixed-layout table

Question

This sounds very similar to previous questions, but I've not found something that matches what I'm trying to do here.

My current code (very verbose with everything in line) looks like this:

 td { border: 1px solid black } 

 <table style="table-layout:fixed"> <tr> <td> <table style="table-layout:fixed"> <tr> <td style="background-color:red"></td> <td style="background-color:limegreen;width:30px"></td> <td style="background-color:blue"></td> <tr> </table> </td> <td> <table style="table-layout:fixed"> <tr> <td style="background-color:red"></td> <td style="background-color:limegreen;width:30px"></td> <td style="background-color:blue"></td> <tr> </table> </td> <td> <table style="table-layout:fixed"> <tr> <td style="background-color:red"></td> <td style="background-color:limegreen;width:30px"></td> <td style="background-color:blue"></td> <tr> </table> </td> <td> <table style="table-layout:fixed"> <tr> <td style="background-color:red"></td> <td style="background-color:limegreen;width:30px"></td> <td style="background-color:blue"></td> <tr> </table> </td> </tr> <tr> <td style="width:25%;text-align:center">Some text here</td> <td style="width:25%;text-align:center">More text</td> <td style="width:25%;text-align:center">Hi</td> <td style="width:25%;text-align:center">Somewhat longer text</td> </tr> </table> 

What I'm trying to accomplish should look like this:

That is, the four main columns should all be the same width, which is the width of the largest content of any of the columns.

The green columns should always be 30px, and the red and blue columns should fill the remaining space each side of that middle column, only up to the width available in the auto-sized outer column.

Setting the internal tables to 100% width makes this happen, but of course the outer table then takes up the entire page width.

I'm also aware that using tables for this is probably not a great idea now we can use CSS, but I'd like to get this example working in tables before 'translating' it.

I'm very opposed to using JavaScript to solve this, for the record!

Edit: I also tried putting all 'subcolumns' in one row, and setting the text to colspan three at a time, with the 25% then applied to that. This ended up confusing the engine, and the width ended up about 75% of the page.

Answer 1

<table style="table-layout:fixed" border="1">

<tr style="font-size: 1px;">
    <td width="25%" colspan="3">&nbsp;</td>
    <td width="25%" colspan="3">&nbsp;</td>
    <td width="25%" colspan="3">&nbsp;</td>
    <td width="25%" colspan="3">&nbsp;</td>
</tr> 
<tr style="font-size: 6px;">
    <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>

            <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>


            <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>

            <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>

</tr>
  <tr>
    <td colspan="3" style="text-align:center">Some text here</td>
    <td colspan="3"  style="text-align:center">More text</td>
    <td colspan="3" style="text-align:center">Hi</td>
    <td colspan="3" style="text-align:center">Somewhat longer text</td>
  </tr>
</table>

this might solve your answer, your previous code html elements are not properly closed look on that also.