How to place a table inside an inline element where cells have a percentage width

Question

I want to create a table inside a container that has a csc-style "display: inline-block". The table should be as wide as the other content in this field, but not wider. There are 3 cells in the table in my example. The first cell should be as wide as its inner contents. The second should get 30% (available width), and the third should get 70% (available width).

This works fine for Firefox (which is how it should look):

Using the following markup:

<div>
    This text sets the width for the display: inline-block container.<br />
    Table should not get wider than this.
    <table>
        <tr>
            <td>Small</td>
            <td width="30%">30%</td>
            <td width="70%">70%</td>
        </tr>
    </table>
</div>

and CSS:

div { display: inline-block; }
table { width: 100%; }
td { background-color: green; }

(Fiddle: http://jsfiddle.net/SuperNova3000/Z7Car/ )

, Chrome ( 100% + Cellspacings ). IE10 100% ( cellpacings).

? -, , ( "" , ). .

PLAIN- HTML CSS, .

:

<td width="1">Small</td>
<td>30%</td>
<td>70%</td>

, "Small". 30%/70% . ?

Answer 1

div { inline-table }, div { inline-block }

. http://jsfiddle.net/Z7Car/3/