如何在不扩展表格单元高度的情况下使表格单元格的内容垂直溢出？

I have a table cell with a div inside. I want the div to overflow outside of the table cell. How can I make this happen? To be clear, I don't want the table cell to expand its height with the div. The code below is what I have tried, but it doesn't work.

我有一个带有div的表格单元格。我希望div在表格单元格之外溢出。我怎样才能做到这一点?要清楚,我不希望表格单元格使用div扩展其高度。下面的代码是我尝试过的,但它不起作用。

HTML:

<table>
    <tr class="row">
        <td class="cell">
            <div class="overflow">Overlow outside of this cell</div>
        </td>
    </tr>
</table>

CSS:

.row {
    height:24px;
    overflow:visible;
}
.cell {
    overflow:visible;
    max-height:24px !important;
}
.overflow {
    height:24px;
    font-size:12px;
    clear:both;
    white-space: nowrap;
    line-height:16px;
    zoom:1;
    text-align:left;
    overflow:hidden;
}

1 个解决方案

#1

If i get you right, this might help:

如果我找对你,这可能会有所帮助:

Fiddle

HTML:

<table>
    <tr class="row">
        <td class="cell">
            <div class="overflow">Overlow outside of this cell</div>
        </td>
    </tr>
</table>

CSS:

.row {
    height:24px;
    overflow:visible;
}
.cell {
    overflow:visible;
    max-height:24px !important;
    border: 1px solid #cccccc;
    width:10px;
}
.overflow {
    height:24px;
    font-size:12px;
    line-height:16px;
    position:absolute;
}