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

响应css垂直分频器

1 个答案: