위치 절대 값을 사용하여 TD의 위치 하위

안녕하세요,이 div35에서 영감을받은 TD 내부의 div 왼쪽 위 모서리에 div 위치를 지정하려고합니다. 이는 question이고 TD의 위치 요소를 돕기위한 것입니다. 나는 그것을 작동시킬 수 없다. 나는 그것이 패딩을 가지고 있을지도 모른다라고 생각한다. 내 코드의 위의 왼쪽 상단 구석에있는 "대상"요소를 얻는 데 도움이 될 수 있다면 어떤 방법 으로든 가능합니다.위치 절대 값을 사용하여 TD의 위치 하위

나는 TD의 innerwrapper의 너비와 높이를 얻으려고했는데 높이는 텍스트 일 뿐이었다. 나는 내부 래퍼의 높이를 TD와 같게하여 목표 div를 모퉁이에 배치 할 수 있기를 바랍니다. 나는

<!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 나는 TD와 같은 높이로 innerwrapper를 설정하는 스크립트를 만들려고하지만 작동하지 않았다 내가 왜 궁금하네요 TDs를

당신이 위치 할 수 없습니다 들었다. 너도 그걸로 도울 수 있으면 좋을거야.

출처

2013-10-13 jack blank

패딩을 셀에서 래퍼로 이동 (또는 대상 부분을 적절하게 오프셋)해야합니다.

출처

2013-10-13 10:53:43 tobi

감사합니다. 다른 패딩을 유지하는 가장 좋은 방법은 무엇입니까? td : not (td : nth-child (1)) {패딩 : 20px 30px; }가 작동하지 않습니다. –

td, th { \t \t \t 패딩 : 20px 30px; \t \t \t \t} TD : n 번째 자식 (1) { \t \t \t 패딩 : 0 픽셀; \t \t} 작동하는 것으로 보입니다. –

위치 절대 값을 사용하여 TD의 위치 하위

답변

관련 문제