html - 如何截断表格行

行的内容高于行本身。有没有截短的方法？
我试过这个：

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

但没用。

最佳答案

将表格行设置为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更改行呈现），则应在表单元格中使用嵌套的元素：

<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/

关于html - 如何截断表格行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8453994/