K
K
king22011-06-28 04:33:00
css
king2, 2011-06-28 04:33:00

How to make a lined table (html, css)?

I needed to make a table on html / css, and not a simple one, but a golden complex one.

Three columns, lined to full width with lines, and inside - text. The closest analogy is a medical card, where the doctor writes some arbitrary text on a lined tablet. The situation is further complicated by the fact that it must be printed, and that it looks the same on print as it does on viewing.

I've looked all over the internet and haven't found a good solution.

It is necessary that it be possible to insert text there, possibly large, for several dozen lines, so that it is normally transferred by means of the browser (for example, when resizing its window), but at the same time all lineswere underlined from one edge of a table column to the other edge, and not just under those places where there is text .

So that it is printed on any printer , and not just on the printer for which it was customized.

I tried to smoke the Internet for a long time, but found nothing.
The crazy solution was to make two DIVs with position: absolute, set their line-heigth to equal, and put the desired text in one and border-bottom in the other. But as soon as you try to make padding or something else, everything shifts, the side borders float, in IE the TH border is one pixel to the left than in TD.

Dear habra community! Help, pliz! Surely there is a solution? :)

Thanks in advance!

Answer the question

In order to leave comments, you need to log in

5 answer(s)
1
1nd1go, 2011-06-28
@king2

Well then you need background. So you want: education-rf.narod.ru/cell.htm ?

V
Vas3K, 2011-06-28
@Vas3K

Maybe I did not fully understand the question, but why not put a striped picture in the background?

1
1nd1go, 2011-06-28
@1nd1go

I think that here you will find what you need:
coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ By the
way, draw in a graph. editor what you need, it will be clearer.

V
Vitaly Peretyatko, 2011-06-29
@viperet

Try this option - without using a striped background image...
pastebin.com/CThk2JJV
ip sum

P
pel, 2011-06-28
@pel

To be honest, it is not clear what the problem is, or the task is not clear.
Here is an example code:
jsfiddle.net/ADDYq/1/
How is this different from what you need to do?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question