用图像解决HTML表格中的溢出问题

时间:2013-09-04 08:53:58

标签: html css html-table

以下是我的HTML表格的代码结构。我在tr class c0中插入一张大图片(标有*...*)。班级no-overflowoverflow: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>

表格图片:

Table Image

1 个答案:

答案 0 :(得分:0)

不幸的是,

overflow:auto本身在一个表格单元格上不会做任何事情。表格单元格将自行调整大小以使其适合其内容。但是,如果向表格单元格添加固定的widthheight,则溢出工作正常,滚动条可见。

请参阅this fiddle