How to print text above a line?

Question

I have to make a UI of a reciept page, in which I have to print text above the line.

Here is an example image:

Example

The option of showing underline below text by using text-decoration property is not working as it just displays line under the text. I also tried by setting border-bottom of the table but it is not working either.

What I need to do is to draw a lengthy horizontal line and I can print text above it. How can I achieve this desire result?

I need it to be IE > 7 compatible.

It did work for me. http://stackoverflow.com/questions/10040842/add-border-bottom-to-table-row. I guess no need to keep this question. Should I delete? — Volatil3, May 05 '13 at 13:44
Happy for you, although you already mentioned that `border-bottom` didn't work. — Mi-Creativity, May 05 '13 at 13:46

Boaz · Accepted Answer · 2013-05-15T19:45:52.043

Consider using input fields with a border-bottom style declaration. Also, since the fields are meant for display purposes only, you should set them with the readonly attribute, so users cannot alter their contents.

For example:

HTML

<input type="text" value="some text goes here" readonly>
<input type="text" value="another field" readonly>
<input type="text" value="some more" readonly>
<input type="text" value="1234" readonly>

CSS

input {display:block;border:none;border-bottom:1px solid #000;}

See jsFiddle demo

Note the values of the fields should be properly escaped before they are included in the HTML. For example, in PHP the values can be escaped with the htmlspecialchars() or htmlentities() functions.

How to print text above a line?

1 Answers1