使用绝对位置的 TD 的位置子项

position child of a TD using position absolute

本文关键字：位置 TD      更新时间：2023-09-26

嗨，我正在尝试将div 定位到 TD 内部div 的左上角，灵感来自此 旨在帮助在TD中定位元素的问题。我无法让它工作。我想可能是因为我有填充。如果您能帮助我将代码中的"目标"元素放在TD的左上角，那就太好了。

我尝试获取TD内部包装纸的宽度和高度，看起来高度只是文本。我想我希望内部包装器的高度与 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>

小提琴我试图制作一个脚本来将内部包装器设置为与 TD 相同的高度，但这不起作用，我想知道为什么。如果你也能帮忙，那就太好了。

您需要

将填充从单元格移动到包装器中（或适当地偏移目标部分）。

相关文章：