테이블 외부의 위치 셀 내용

Question

td의 내용을 상위 항목 table 외부에서 볼 수 있도록 시도했습니다. 나는 그것이 가능하다는 것을 확신하지 못한다. 그러나 나는 포기하기 전에 여기에서 물을 것이라고 생각했다.

내가하고 싶은 것은 아이콘이있는 테이블 행을 "앞에"추가하는 것입니다. 그러나 테이블 안의 것이 아니라 테이블 옆에 표시하고 싶습니다.

td의 내부에 div 인 아이콘의 컨테이너에 절대 위치 지정을 적용 해봤지만 음의 여백은 있지만 표 가장자리 아래에있는 아이콘을 가져옵니다. 내가 잘 또는 모든 테이블/행/세포에 작품의 위치를 ​​생각하지 않는다

<tr> 
    <td> 
    <div class="icon-container"> // I want this to display 
     <i class="icon"></i>  // to the left of the row 
    </div>      // outside of the table 
    Cell content here 
    </td> 
    ... 
</tr> 

Answer 1

, 이것은 간단하다. 아이콘이 항상 각 행의 가장 왼쪽에있는 경우 아이콘 컨테이너의 상대 위치로이 작업을 수행 할 수 있습니다. 아이콘의 너비와 테이블 경계의 크기를 기준으로 왼쪽으로 이동하고 좋은 측정을 위해 약간의 여백을 지정하십시오.

.icon-container { 
    position:relative; 
    left:-17px; 
    height:0; overflow:visible; 
} 
.icon-container .icon { 
    display:block; width:10px; height:10px; 
    background-color:green; border-radius:5px; 
} 

그게 전부입니다. 상대 위치 지정은 주변의 다른 요소에 영향을주지 않으므로 다른 작업을 수행하지 않아도됩니다.

Fiddle.

Answer 2

:

생성 된 테이블 행은 다음과 같이 보인다. 여기 내가 한 일은 JSFiddle입니다. 나는 컨테이너가 바깥에 있기를 원했기 때문에 그것을 또 다른 컨테이너에 싸서 넣었다. 외부 컨테이너를 상대 위치로 설정하고 내부 컨테이너를 절대 위치로 설정합니다. 그런 다음 왼쪽/위쪽으로 원하는 내용을 내부 컨테이너에 제공 할 수 있습니다. 외부 컨테이너의 폭과 높이는 0이어야합니다. 그렇지 않으면 셀 내용이 푸시됩니다. 나는 심각하게 당신이 계신 잘못 해석하지 않는 한

<table> 
    <tr> 
     <td> 
      <div class = "icon-super-container"> 
       <div class = "icon-container"> 
        <i class = "icon"></i> 
       </div> 
      </div> 
      Cell content here 
     </td> 
     <td>More cell stuff</td> 
    </tr> 

    <tr> 
     <td> 
      <div class = "icon-super-container"> 
       <div class = "icon-container"> 
        <i class = "icon"></i> 
       </div> 
      </div> 
      Cell content here 
     </td> 
     <td>More cell stuff</td> 
    </tr> 
</table> 

C

table { 
    margin-left:100px; 
    margin-top:50px; 
    border:1px solid blue; 
    padding:15px; 

} 

td { 
    border:1px solid black; 
} 

.icon-super-container { 
    position:relative; 
} 

.icon-container { 
    background-color:red; 
    width:10px; 
    height:10px; 
    position:absolute; 
    left:-15px; 
    top:2px; 
}