响应css垂直分频器

Question

我创建一个包含垂直分频器的响应表。我希望该分隔线根据所有屏幕尺寸随文字一起移动。左右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> 

编辑

一个更简单和更清洁的方式来创建分频器使用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; 
}