반응 CSS 수직 분할

Question

임 수직 디바이더를 포함하는 반응 테이블을 생성. 그 분배기가 모든 화면 크기에 따라 텍스트와 함께 움직이기를 바랍니다. 왼쪽과 오른쪽 td는 분배기가 문제를 일으키기 만하면 반응이 좋습니다.

CSS의는

.divider{ 
position: absolute; 
left:30.5%; 
top:6%; 
bottom:25%; 
border-left:2px solid #333; 
overflow:hidden; 
} 

과 관련 HTML이 문제는 내가 CSS에서 다른 어떤 절대에서 위치를 변경할 때 디바이더를 숨 깁니다입니다

<table width="100%"> 
<tr> 
<td> 
this is test 
</td> 
<td><div class="divider"></div></td> 
<td> 
This is test2 
</td> 
</tr> 
</table> 

입니다. 귀하의 경우에는

Answer 1

는 .... 그 일이 생겼 난 당신이에, 폭을 포함하는 <td> ....이 부모 td에게 위치를 제공 첫번째

추가 높이 만 사업부에 위치를 제공하고 있지 않은지 느끼기 때문에 html, body 당신은 갈 수 있습니다 ...

solution

CSS

html, body { 
    height:100%; /* added */ 
    width:100%;/* added */ 
} 
.divider { 
    position: relative; /* changed*/ 
    left:30.5%; 
    top:6%; 
    bottom:25%; 
    border-left:2px solid #333; 
    overflow:hidden; 
} 
td.r { 
    position:absolute;/* added */ 
    height:100%;/* added */ 
    width:100%;/* added */ 
} 

HTML

<table width="100%" border=1> 
    <tr> 
     <td>this is test</td> 
     <td class="r">  <!-- notice the added class--> 
      <div class="divider"></div> 
     </td> 
     <td>This is test2</td> 
    </tr> 
</table> 

편집

훨씬 간단하고 깨끗한 디바이더를 만들 수있는 방법은 아닌 div .... check this demo

에만 분할에 대한 td을 사용하는 것입니다 01에 divider 클래스를 추가, 디바이더를 만드는 div를 제거하고 대신그 자체!

<table width="100%" border=0> 
    <tr> 
     <td>this is test</td> 
     <td class="divider"></td> 
     <td>This is test2</td> 
    </tr> 
</table> 

CSS

td { 
    text-align:center 
} 
td.divider { 
    position:absolute; 
    height:100%; 
    width:1px; 
    border:1px solid #000; 
    background:#000; 
}