使用位置絕對的TD的位置孩子

嗨我試圖定位一個div的div左上角的TD這個靈感來源於這個 question，旨在幫助定位在TD的元素。我無法讓它工作。我想這可能是因爲我有填充。任何方式，如果你能幫我把我的代碼中的「目標」元素放到我的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>

JsFiddle 我試圖讓一個腳本來innerwrapper設置爲相同的高度TD，但沒有工作，我不知道爲什麼。如果你能提供幫助，那將會很棒。

來源

2013-10-13 jack blank

您需要將填充從單元格移動到包裝（或適當地偏移目標部分）。

來源

2013-10-13 10:53:43 tobi

謝謝。如果我從td移動填充，那麼在其他單元格中填充填充的最佳方法是什麼？td：not（td：nth-child（1））{padding：20px 30px; }不起作用 –

td，th { \t \t \t padding：20px 30px; \t \t} \t \t TD：第n個孩子（1）{ \t \t \t填充：0像素; \t \t}似乎工作 –

使用位置絕對的TD的位置孩子

回答

相關問題