responsive css vertical divider

Question

Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.

The CSS is

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

and the related html is

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

The problem is when I change the position from absolute to anything else in css it hides the divider.

Answer 1

In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first

add height, width to html,body and your are good to go...

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

A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo

Remove the div creating the divider and instead, add the divider class to td itself!

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