Question

The best way to describe the issue would be by posting a jsFiddle, so here it is.

And a screenshot for reference:

I have to put a div containing something within a td element, which has some formatting and height. The div cannot disrupt the cell’s height but itself is a little bigger than line-height within the cell, so the whole row’s height rises. It can be seen as the difference in height between the upper and lower tables on the screenshot.

Positioning the div relatively and moving it upward doesn’t help. My question is – is it possible to somehow position the div in the exact same place as in my example but without affecting the table row’s height?

Absolute positioning works as expected but has some flaws – the contents of the table and other elements of my page can change and therefore maintaining the proper position of the div would require monitoring it’s parent with JavaScript which wouldn’t be a very practical solution.

Thanks everyone for any help.

Answer 1

You can achieve the effect you’re looking for by wrapping the div inside the table cell with another div which is relatively positioned. Then change your div to be absolutely positioned.

For some reason, jsFiddle, isn’t loading for me right now, so here’s the code.

HTML

<table class="some-table">
    <tr>
        <td>Cell 1</td>
        <td>
            Cell 2
            <div class="wrapper">
                <div class="checkbox-div">
                    <input type="checkbox" id="checkbox"/>
                    <label for="checkbox">Label</label>
                </div>
            </div>
        </td>
        <td>Cell 3</td>
    </tr>
</table>
<br/>
<br/>
<table class="some-table">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

CSS

.some-table td {
    border: 1px solid black;
    padding: 5px;
    width: 200px;
    font-size: 10px;
}

.wrapper {
    position: relative;
    float: right;
    width: 200px;
}

.checkbox-div {
    border: 1px solid black;
    position: absolute;
    top: -20px;
    right: 0;
}