如何截断表行

Question

行的内容高于行本身。有没有办法截断？

我试过了：

    <table>
        <tbody>
            <tr style="height:100px;overflow:hidden">
                <td>
                    <div style="height:400px; width:100px; background: yellow;"></div>
                </td>
            </tr>
        </tbody>
    </table>

但它不起作用。

Answer 1

将表格行设置为display: block

<table>
    <tbody>
        <tr style="height:100px;overflow:hidden;display:block">
            <td>
                <div style="height:400px; width:100px; background: yellow;"></div>
            </td>
        </tr>
    </tbody>
</table>

修改

如果您希望表行仍然像表行一样（display: block更改行呈现），则应该在表格单元格内使用嵌套的DIV元素：

<table style="border: solid blue 3px">
    <tbody>
        <tr>
            <td>
                <div style="height:100px;overflow:hidden;border: solid black 3px;">
                   <div style="height:400px; width:100px; background: yellow;"></div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

预览代码：http://jsfiddle.net/pYzRu/