How do I put a horizontal line/border right in the middle of a table row?

Question

Essentially I would like to apply a bottom-border, but rather than being in the bottom of the cell, I want it to be in the dead center.

How do I do that with CSS & HTML only (and using no graphics)?

So imagine the height of the cell/row is 50px, and width = 100px, I would like the line to be width = 100px, and it to be at 25px height in the row/cell.

Thanks.

P.S. Imagine something like the cross out functionality for font - but for an empty space (if that makes any sense).

Answer 1

perhaps put an <hr> in the cell and then use CSS to give it an absolute position.

Answer 2

try this:

<table>
    <tr>
        <td style="width:100px; height:50px;
                   line-height:50px; letter-spacing:96px;
                   text-decoration: line-through;">
        &nbsp;
        </td>
    </tr>
</table>

or in case u change ur mind about the graphics:

td.emptyCell {
    background-image: dot.gif; /* 1x1 px, whatever color u want */
    background-repeat: repeat-x;
    background-position: 0% 50%;
}