CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jack blank
jack blank

Reputation: 5195

position child of a TD using position absolute

Hi I'm trying to position a div to the upper left corner of div inside of a TD inspired by this question that was meant to help position elements in a TD. I can't get it to work. I think it may be because I have padding. Any ways if you can help me get the "target" element that is in my code to the upper left corner of my TD that would be great.

I tried get the width and height of the innerwrapper of the TD and it looks like the height was just the text. I guess I want the height of the inner wrapper to be the same as the TD so could position the target div in the corner. I heard you can't position in TDs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        td,th{
            padding: 20px 30px;
        }
        .innerWrapper{
            position:relative;
        }
        .target{
            position: absolute;
            top:0;
            left: 0;
            background-color: blue;
        }
        td:nth-child(1){
            background-color: yellow;
        }
    </style>
    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <th>one</th>
            <th>two</th>
            <th>three</th>
            <th>four</th>
        </tr>
        <tr>
            <td><div class = "innerWrapper">td1<div class = "target">T</div></div></td>
            <td>td2</td>
            <td>td3</td>
            <td>td4</td>
        </tr>
    </table>
        <script>
            $(document).ready(function(){
                tdh = $('td:nth-child(1)').outerHeight()
                alert("td"+ tdh);
                var inner = $('.innerWrapper').outerHeight(tdh);
                alert(inner);
            });
        </script>
</body>
</html>

JsFiddle I tried to make a script to set the innerwrapper to the same height as the TD but that didn't work and I'm wondering why. If you can help with that too that would be great.

Upvotes: 0

Views: 281

Answers (1)

tobi
tobi

Reputation: 789

You need to move the padding from the cells into the wrapper (or offset the target-part appropriately).

Upvotes: 1

Related Questions