0

こんにちは、TD 内の要素を配置するのに役立つこの質問に触発されて、TD 内の div の左上隅に div を配置しようとしてい ます。私はそれを働かせることができません。パディングが入っているからだと思います。コード内の「ターゲット」要素を TD の左上隅に配置するのを手伝っていただければ、どんな方法でも構いません。

TD の innerwrapper の幅と高さを取得しようとしましたが、高さは単なるテキストのようです。内側のラッパーの高さを TD と同じにして、ターゲット div を隅に配置できるようにしたいと思います。TD での位置付けはできないと聞きました

<!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 innerwrapper を TD と同じ高さに設定するスクリプトを作成しようとしましたが、うまくいきませんでした。あなたもそれを手伝うことができれば、それは素晴らしいことです。

4

1 に答える 1

1

パディングをセルからラッパーに移動する (またはターゲット部分を適切にオフセットする) 必要があります。

于 2013-10-13T10:53:43.447 に答える