html - 解决带有图像的 HTML 表格中的溢出

Question

以下是我的 HTML 表格的代码结构。我在 tr class c0 中插入一个大图像(由 *...* 标记)。 no-overflow 类有 overflow:auto。在其他页面中，使用相同的类 no-overflow 如果图像变大，则有水平和垂直滚动条。但是，在这种特殊情况下，不会出现条形。

 <table class="someclass" width="60%">
    <thead>
        <tr>
        <th class="header c0" style="text-align:left;">Content: Test 1</th>
        <th class="header c1">Class Statistics</th>
        </tr>
    </thead>
    <tbody>
        **<tr class="r0">
            <td class="cell c0" style="text-align:left;">Question: <br>
                <div class="no-overflow">
                    <div class="no-overflow">
                        <p><img src="image path" width="1365" height="767"></p>
                    </div>
                </div>
            </td>
            <td class="cell c1" style=""> </td>
        </tr>**
        <tr class="r1">
            <td class="cell c0" style="text-align:left;">Answer:</td>
            <td class="cell c1" style=""> </td>
        </tr>
        <tr class="r0">
            <td class="cell c0" style="text-align:left;"><input type="button" name="1" value="Next"> Next </td>
            <td class="cell c1" style=""></td>
        </tr>
        <tr class="r1 lastrow">
            <td class="cell c0" style="text-align:left;"></td>
            <td class="cell c1" style=""> </td>
        </tr>
    </tbody>
</table>

表格图片:

Answer 1

不幸的是，

overflow:auto 本身在表格单元格上不会做任何事情。表格单元格将自行调整大小以适应其内容。但是，如果您将固定的 width 和 height 添加到表格单元格，则溢出效果很好并且滚动条可见。

参见 this fiddle .