如何使表单元格的内容垂直溢出而不扩展表单元格的高度？ [英] How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

问题描述

我有一个内部有 div 的表格单元格。我想让 div 溢出表单元格。我如何使这发生？为了清楚起见，我不想让表单元格使用 div 来扩展它的高度。

> < table>
< tr class =row>
< td class =cell>
< div class =overflow>在此单元格之外Overlow< / div>
< / td>
< / tr>
< / table>


CSS：

 code> .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; 
} 
  

解决方案

这可能会有帮助：

小提琴

HTML：

 < table& 
< tr class =row> 
< td class =cell> 
< div class =overflow>在此单元格之外Overlow< / div> 
< / td> 
< / tr> 
< / table> 
  

CSS：

 code> .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; 
} 
  

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.

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;
}

解决方案

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;
}

这篇关于如何使表单元格的内容垂直溢出而不扩展表单元格的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！