html - CSS を使用してテーブル内の div を動的にサイズ変更する

Question

このサイトを検索したところ、コンポーネントを動的にサイズ変更する最良の方法は、CSS の「位置」および「幅/高さ」パラメーターを使用することです。

私は部分的にそのように見えるアプリを持っています:

現在Javascript( $(window).width(), $(window).height())でリサイズ中ですが、CSSでちゃんとリサイズしたいです。

これが私のテーブルレイアウトです：

<table class="table">
    <tr >
        <td >
            <div id="chartdiv1" ></div>
        </td>
        <td rowspan="3">
            <div id="Simulation" ></div>
            <div id="SimLabels" style="border: dashed; z-index: 1; width: 190px; position: relative; ">
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="BedMassLabel"><strong style="color: #4bb2c5;">Bed Mass (kg)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="H2OBedLabel"><strong style="color: #EAA228;">H2O in Fluid Bed (kg)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="BedTempLabel"><strong style="color: #c5b47f;">Temperature of Bed (C)</strong><br />
                <input type="checkbox" onchange="redrawSim()" checked="checked" id="evapRateLabel"><strong style="color: #579575;">Evaporation Rate (?)</strong>
            </div>
        </td>
    </tr>
    <tr >
        <td>
            <div id="chartdiv2" ></div>
        </td>
    </tr>
    <tr >
        <td >
            <div id="chartdiv3" ></div>
        </td>
    </tr>    
</table>

位置、幅、高さのさまざまな組み合わせを試してみましたが、幅/高さを何パーセントに設定しても、レイアウトには独自の考えがあるように見えることがよくあります。

私は MVC と Twitter Bootstrap の両方を使用しているため、おそらく私の html はこれの影響を受けています。上記のデザインを動的なサイズ変更で複製するように、誰かが私のhtmlを修正するのを手伝ってくれませんか?