html - table-cell 中宽度和高度为 100% 的 Div 在内容较大时更改 table-cell 的大小

Question

我有一个表格，其中有一个由 html-table-algorithm 计算的单元格(右下角的单元格)。在我添加大于计算单元格的内容之前，它的工作方式与我期望的完全一样(如果您想测试它，请在两行中评论)。

有没有办法在不使用固定高度和宽度的情况下解决这个问题(因为第二行也是使用 html-table-algorithm 创建的，并且只有固定高度来说明示例中的它)？

点击here对于 JSFiddle。

HTML:

<table>
    <tr style="height: 40px">
        <td style="width: 200px;">3</td>
        <td>4</td>
    </tr>

    <tr style="height: 40px">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>
            <div class="content">
                <!--
                <div style="border: 1px solid red; width: 3000px; height: 40px;"></div>
                <div style="border: 1px solid red; width: 40px; height: 3000px;"></div>
                -->
            </div>
        </td>
    </tr>
</table>

CSS:

html, body {
    height: 100%;
}

body { 
    margin: 0; 
}

table{
    border: 1px solid red; 
    width: 100%; 
    height: 100%;
    min-width: 600px;
}

table tr td{
    border: 1px solid orange;
}

.content{
    border: 1px solid green;
    height: 100%;
}

Answer 1

更新内容 css 类:

.content{
    border: 1px solid green;
    height: 100px;
    max-width:100px;
    max-height:100px;
    overflow-x:scroll;
}