Question

我有一个表格，其中的单元格由html-table-algorithm（右下角的单元格）计算得出。这与我期望它工作直到我添加大于计算单元格的内容（如果你想测试它的两行注释）完全相同。

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

点击here获取JSFiddle。

HMTL：

<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;
}

Answer 2

我找到了解决方案，这很明显。该表必须是固定的，而不是自动的（指定为here）。

我的最终代码看起来像this（JSFiddle）。

对于远期未来的访客：

HTML：

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

    <tr style="height: 40px">
        <td style="min-width: 200px; max-width: 200px;">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td style="min-width: 200px; max-width: 200px;">5</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%;
    width: 100%;
}

body { 
    margin: 0; 
}

table{
    table-layout:fixed;
    border: 1px solid red; 
    width: 100%; 
    height: 100%;
}

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

.content {
    border: 1px solid green;

    height: 100%;
    max-height:100%;

    width: 100%;
    max-width: 100%;

    overflow: auto;
}

表格单元格中100％宽度和高度的Div在内容较大时更改表格单元格的大小

2 个答案: