column width not controlled by row above it - css

Question

Putting 2 one-row tables after each other I get the desired outcome: 2 adjacent rows that don't have the same column width. http://jsfiddle.net/x2SQN/
---------------------
|100px | 100% - 100px|
---------------------
| 50% | 50% |
---------------------
Can I achieve this also with a single <table>?
http://jsfiddle.net/x2SQN/
Basically I cannot use javascript or not in-line css.

Answer 1

No. Within a table the columns remain consistent from top to bottom.
You can play around with the colspans of each cell but that's about it.
e.g. if you wanted you could do this.
<table>
<tr>
<td width="20%">20%</td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>
<tr>
<td width="50%" colspan="2">50%</td>
<td width="50%">50%</td>
</tr>
</table>
But you will be limited to using a combination of fixed px sizes OR % sizes as you can't do 50% - 100px for example.

Answer 2

Usually, We transform block elements to the table model to achieve a 'Table like' display, and now, as a solution to your problem: I found myself doing just the opposite.
the main idea is to transform your table, to a block model design, where we can take control of the width of every element.
the main gain of my solution, is that you can use CSS function (like calc) to give responsive width to column [like calc(100% - 100px)].
but the main downsize of my solution is the scenario when you have different cells height in the same row.
luckily that can be easily fixed with faux columns techniques. (I used one-true-layout)
so, after all that been said, lets take a look at the solution: (some of it is written in the CSS section, with regular CSS selectors and not inline as you requested, because it was easier for me. but you can copy-past everything to the right place and make it all-inline)
Working Fiddle Tested on: Chrome, IE10, FF
HTML (I've add the <tbody> so you can apply the inline-CSS styling)
<table>
<tbody>
<tr>
<td style="background-color:red; width: 100px;">100px</td>
<td style="background-color:yellow; width: calc(100% - 100px);">100% - 100px<br/>another line to demonstrate <i>faux column</i></td>
</tr>
<tr>
<td style="background-color:azure; width:50%;">50%</td>
<td style="background-color:pink; width:50%;">50%</td>
</tr>
</tbody>
</table>
CSS (all of that styling can be placed inline)
*
{
margin: 0;
padding: 0;
}
table, tbody, tr
{
display: block;
}
tr
{
overflow: hidden; /*Faux column*/
}
td
{
float: left;
padding-bottom: 99999px; /*Faux column*/
margin-bottom: -99999px; /*Faux column*/
}

Answer 3

You can do this using fake colspan values. Treat them as percentages to keep it simple.
<table border="0" cellspacing="6" width="400">
<tr>
<td colspan="30" style="background-color:red;" />
<td colspan="70" style="background-color:yellow;"/>
</tr>
<tr>
<td colspan="70" style="background-color:black;" />
<td colspan="30" style="background-color:pink;" />
</tr>
</table>