How can I make the contents of a table cell overflow vertically without also expanding the table cells height?


Tags: html,css,table

Problem :

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


Solution :

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

    CSS Howto..

    I have a video background on my bootstrap page - how can I make it “fixed”?

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    How do browsers read and interpret CSS?

    How to add css and js files on node pages independent of the theme?

    How to close the menu after click third layer menu item

    How to use SASS logic within a CSS 3 media query [duplicate]

    CSS: How to align buttons and text horizontally

    How do you tell a browser, “if you need to wrap, wrap here first”?

    How can I horizontally align these divs?

    How to create fluid trapezoid image with css?

    How to draw a dotted line with css?

    How to use CSS in html table inside javascript

    How can I create this simple form example in HTML?

    javascript or css: How to Hide any Number followed by dot Prefix “1.text”, “2.text”…“30.text” from a Text inside a Label

    How can we create custom style for Jquery-ui dialog window in PHP?

    How to turn a CSS class on and off by clicking a button

    How do I change the z-index of a div when the user mouses over it?

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    How to make a glyphicon work as a submit button?

    How to pull css properties along with html content in Ajax?

    Can't figure out how to set color for specific div's in the loop

    How to find the highest z-index using jQuery

    How to create table by using div

    How to adjust toaster popup width

    How to have a multiline CSS horizontal scroll?

    In CSS, how to scale multiple overlayed images responsively?

    how to set width of a div in percentage minus certain pixels using javascript or css

    How to make a circle breadcrumb with only css

    selenium - how to click on a link based on its text using css instead of xpath and without using the contains operator?

    How to blur only background and not content in Ionic/CSS