javascript - 如何在图像上方的列中心画一条黑线？

Question

我需要能够在特定列 (td) 的中心正下方绘制一条黑线。此列包含图像，因此黑线必须位于图像顶部。

我正在 CSS 中尝试这样做，但 javascript 也可以。我不想为黑线使用图像。

我尝试过:

.verticalLine {
    position: relative;
    float: center;
    height: 100%;
    border-right: 1px solid #000;
    z-index: 9999;
}

然后:

<td align="center" valign="center">
    <div class="verticalLine" id="verticalLine"></div>
etc.

...但这并没有显示任何内容。

我也试过 left: 50%; 和 left: 428; 但也没有用。

有什么想法吗？

Answer 1

使用您的代码:

<td align="center" valign="center"><div class="verticalLine" id="verticalLine"></div>

我为此使用的 CSS 可能如下所示:

td {
    position: relative;
}
.verticalLine{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    border-right: solid 1px #000;
    z-index: 9999;
}

通过相对定位的 TD，您的行可以定位为绝对，这将它从标准流中取出并且不会影响单元格中其他元素的定位。当然，如果您使用类将 position: relative 应用于 TD 会更好，这样它就不会影响所有其他 TD 标签。