положение ребенка TD с использованием положения абсолютного

Привет, я пытаюсь расположить div в верхний левый угол div внутри TD, вдохновленный этим question, который должен был помочь позиционировать элементы в TD. Я не могу заставить его работать. Я думаю, это может быть потому, что у меня есть прокладка. Любые способы, если вы можете помочь мне получить элемент «target», который находится в моем коде, в верхнем левом углу моего TD, это было бы здорово.положение ребенка TD с использованием положения абсолютного

Я попытался получить ширину и высоту внутренней обмотки TD, и это выглядит так, что высота была только текстом. Я думаю, я хочу, чтобы высота внутренней обертки была такой же, как и TD, поэтому могла бы позиционировать целевой div в углу. Я слышал, что вы не можете поместить в 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 Я попытался сделать сценарий, чтобы установить 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 тд: п-й ребенок (1) { \t \t \t обивка: 0px; \t \t}, похоже, работает –

положение ребенка TD с использованием положения абсолютного

ответ

Смежные вопросы