отзывчивый css вертикальный делитель

Question

Im создает отзывчивую таблицу, которая содержит вертикальный разделитель. Я хочу, чтобы этот разделитель перемещался вместе с текстом в соответствии со всеми размерами экрана. левый и правый td реагируют, только разделитель создает проблему.

CSS-это

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

и соответствующий HTML является

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

Проблема заключается в том, когда я изменить положение с абсолютного на что-нибудь еще в CSS он скрывает разделитель.

Answer 1

В вашем случае .... его происходит потому, что я чувствую, что ваши позиции дают только DIV и не вмещающего <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> 

EDIT

Намного проще и чище способ создать разделитель, чтобы использовать td только для делителя, не div .... check this demo

Удалите div, создавая разделитель, и вместо этого добавьте класс divider к td сам!

<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; 
}