css - 响应式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;
}