CSS：如何使用两列约束启用表tds中的滚动

Question

我在一个部分中包含一个3列表，用于定义约束区域（宽度和高度）。

这个表需要在整个部分中传播。 两个第一列在底部有一个固定元素，限制了它们的高度。

我想让一切都变得灵活，以适应不同的外形。

小提琴：http://jsfiddle.net/stephanedeluca/Gv74f/#base

代码段如下：

<section>
    <div style="height:calc(100% - 20px)">
        <!-- three-first consequences, cause, cure-column rows -->
        <table style="background-color:rgb(252,252,252);">
            <thead>
                <tr>
                    <th>Consequences</th>
                    <th>Causes</th>
                    <th>Cures</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- consequences column -->
                    <td style="border-right: solid 6px white; width:33%">
                        <div class="vScrollable" style="height: calc(100% - 100px)">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </td>
                    <!-- causes column -->
                    <td style="border-right: solid 6px white; width:33%">
                        <div class="vScrollable" style="height: calc(100% - 100px)">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </td>

                    <!-- cures column -->
                    <td rowspan="2">
                        <div class="vScrollable">
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div style="background-color: lightblue; width: 400px; height: 100px">
                            to stay at the bottom
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</section>