Question

I need to be able to draw a single black line exactly down the center of a specific column (td). This column contains an image and so the black line would have to be over the top of the image.

I’m attempting this in CSS, but javascript would be OK. I would prefer not to use an image for the black line.

I’ve attempted:

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

and then:

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

…but that doesn’t show anything.

I also tried left: 50%; and left: 428; but that didn’t work either.

Any ideas?

Answer 1

Using your code:

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

The CSS I’d use for this might go as follows:

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

With the TD positioned relative, your line can be positioned absolute, which takes it out of the standard flow and won’t affect the positioning of other elements in the cell. Of course, it would be better if you applied the position: relative to the TD using a class, so it doesn’t affect all the other TD tags.