Question

我有一张表，其中单元格具有固定的高度。在表格中我有一个div也有一个固定的高度，如果那个高度超过单元格高度，我希望它溢出单元格，没有单元格高度延伸（不是我通常想要构建的布局），但这是一个给定的起点。）

例如：

<table>
    <tr>
        <td>
            <div>
                12345
            </div>
        </td>
        <td></td>
    </tr>
</table>

table
{
     width: 90%;
     margin: 10px;   
}

td
{
    width: 50%;   
    border: 1px solid blue;
    padding: 5px;
    height: 100px;
    vertical-align: top;
}

div
{
    height: 250px;
    width: 75%; 
    border: 1px solid red;
}

这导致表格单元格高度根据div高度延伸。

我尝试将position: absolute添加到div，position: absolute添加到td，这样就可以在Chrome和IE中实现这一功能（请参阅此jsFiddle example）：

但是，在Firefox中，position: absolute导致div的宽度与窗口宽度而不是单元格宽度相关：

如何解决这个问题？我正在寻找除position: absolute以外的解决方案，或者在FF中获得div宽度的方法。

Answer 1

您可以使用表格单元格中的额外div来实现您所需的功能：

CSS：

table
{
     width: 90%;
     margin: 10px;   
}

tr
{
    height: 100px;
}
td
{
    width: 50%;   
    border: 1px solid blue;
    padding: 5px;
    height: 100px;
    vertical-align: top;
    position: relative;
}

div.outer {
    height:100px;
    max-height: 100px;
    overflow: visible;
    width: 100%;
}

div.inner
{
  height: 250px;
  width: 75%;
    border: 1px solid red;
}

HTML：

<table>
    <tr>
        <td>
            <div class="outer">
                <div class="inner">
                    12345
                </div>
            </div>
        </td>
        <td></td>
    </tr>
</table>

我分叉你的jsfiddle演示：http://jsfiddle.net/dyes5/1/

Answer 2

在道明上设置overflow:hidden。

http://www.w3schools.com/cssref/pr_pos_overflow.asp

固定表格单元格内的高度div而不扩展单元格的高度

2 个答案: