CSS horizontal line in the middle of a td

Question

The idea is, in a table, inside a td put a line in the middle of such, like this:

That you can write in it and the line stays there, like a "line background", but inside the td

Any ideas?

Not the best solution but what about canvas or background image — Hessam, Mar 01 '14 at 18:42
@NicoO Basically, i want to do a music sheet in a table, with the C,D,E... and, if you know about music, the notes are placed down, up and in the line, so when is up and down i use the css border-top, border-bottom, in the middle is the problem — urco, Mar 01 '14 at 18:55
By now i try to do a line by text-decoration, but it doesn't work when is no words in it, draw a line by css and try to move a border to the middle, that's all — urco, Mar 01 '14 at 18:57
possible duplicate of [Strikeout an entire table row](http://stackoverflow.com/questions/1204677/strikeout-an-entire-table-row) — Phrogz, Mar 01 '14 at 21:40
Or http://stackoverflow.com/questions/4619542/linethrough-strikethrough-a-whole-html-table-row — Phrogz, Mar 01 '14 at 21:49

Mr_Green · Answer 1 · 2014-03-01T19:35:07.107

8

There are many ways

1) Add HTML <strike> or <del>.

2) use css property, text-decoration: line-through;

3) Using CSS:

td{
    border: 1px solid black;
    position: relative;
}

td:after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    top: 50%;
}

Working Fiddle

EDIT: Since there is a bug in firefox related to position: relative and td element, wrap the text in a div of each td and use the same above css.

Working Fiddle

EDIT 2: In the comments below, @NicoO showed that the firefox bug can be resolved by giving line-height: 0 to the tr element.

Working Fiddle

edited Mar 01 '14 at 19:35

answered Mar 01 '14 at 18:45

Mr_Green

40,727
45
159
271

3

`position: relative;` will fail on Firefox for `td` - [Take a read](http://stackoverflow.com/a/21554792/1542290) – Mr. Alien Mar 01 '14 at 18:49
@Mr.Alien hey yes.. it is not working.. anyway you might knew? – Mr_Green Mar 01 '14 at 18:51
Just found `.iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease()` jQuery plugin at [css-tricks](http://css-tricks.com/absolutely-position-element-within-a-table-cell/) :) – Hashem Qolami Mar 01 '14 at 18:58
@HashemQolami LOL, method name is so ugly – Mr. Alien Mar 01 '14 at 18:59
And as expected, he is appending the `div`, even OP can do that if he can modify his HTML – Mr. Alien Mar 01 '14 at 19:00
I think only the last one is perfect, the first two solutions might not be exactly what the OP is looking for. – King King Mar 01 '14 at 19:11
@KingKing yup I think the same (realized after posting it) but kept for other future readers.. – Mr_Green Mar 01 '14 at 19:15
@Mr_Green, maybe you want to post this version to your answer as well? http://jsfiddle.net/J6zn5/5/ – Nico O Mar 01 '14 at 19:21
@NicoO that looks nice to me.. why don't you post it ? – Mr_Green Mar 01 '14 at 19:24
It's basically your answer. This is just some Firefox bug workaround thing I added. – Nico O Mar 01 '14 at 19:26
@NicoO I updated my post.. please check if I miss anything. – Mr_Green Mar 01 '14 at 19:35
nope. Looks pretty good- thank you. Your edit is better anyway ;) no problem. – Nico O Mar 01 '14 at 19:36
@NicoO oops sorry.. your edit gone.. :) – Mr_Green Mar 01 '14 at 19:37

score 2 · Answer 2 · answered Mar 01 '14 at 19:05

Here is the working one - Result Fiddle

HTML

<td><i class="line"></i>This Is demo Text</td>

CSS

.line{
    width:100%;
    height:0;
    border-bottom:1px solid #111;
    float:left;
    margin:0;
    position:absolute;
    z-index:0;
    top:50%;
    left:0
}

score 0 · Answer 3 · answered Mar 01 '14 at 18:44

0

You can try to create an image (1px width and height of your td) and use background-image property in css like this:

td{
    background-image: url('relative/path/to/your/image');
}

answered Mar 01 '14 at 18:44

Fabien

548
7
18

2

I'd say `background: url(...) 0 center repeat-x; ` – Hashem Qolami Mar 01 '14 at 18:46

score 0 · Answer 4 · answered Mar 01 '14 at 18:51

0

I just tested doing it with a span, and it worked, but other solutions might be much more elegant.

http://codepen.io/anon/pen/GAlFr

answered Mar 01 '14 at 18:51

Erik Lumme

5,202
13
27

CSS horizontal line in the middle of a td

4 Answers4