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