Понадобилось мне сделать на html/css таблицу, да не простую, а золотую сложную.
Три столбца, разлинованные на всю ширину строчками, а внутри — текст. Ближайшая аналогия — медицинская карточка, где доктор пишет некий произвольный текст в разлинованной табличке. Положение осложняется еще и там, что это надо печатать, и чтобы на печати оно выглядело так же, как и при просмотре.
Перерыл весь интернет — нормального решения так и не нашел.
Нужно, чтобы можно было вставить туда текст, возможно, большой, на несколько десятков строк, чтобы он нормально переносился средствами браузера (например, при изменении размеров его окна), но чтобы при этом все строчки подчеркивались от одного края столбца таблицы до другого его края, а не только под теми местами, где имеется текст.
Чтобы оно печаталось на любом принтере, а не только на том принтере, под который подгонял.
Долго пытался курить интернет, но ничего не нашел.
Ненормальное решение состояло в том, чтобы сделать два DIV с position: absolute, уравнять им line-heigth и в один положить нужный текст, а в другой — с border-bottom. Но как только пытаешься сделать padding или еще что — все смещается, боковые бордюры плывут, в IE бордюр TH на один пиксель левее, чем в TD.
Уважаемое хабрасообщество! Помогите, плиз! Наверняка же есть какое-то решение? :)
Нарисовать картинку для текущей (необходимой) высоты строки (при необходимости, картинку перерисовывать); самому указать все размеры, чтоб браузеры не гадали; считать, что браузеры зумят страницу целиком, вместе с фоном, а не только текст; проверить на нескольких разных принтерах, может с ними и нормально все будет :)
имхо
Я не очень дружен с графиредакторами, но представьте себе, что нужно сэмулировать листок тетради в линейку, с полями. В основной части вывести большой блок текста, чтобы подчеркивание не зависело от того, насколько много слов и где они кончаются, в каждой строчке этого листка.
К сожалению, оно не переносит BR внутри, а также разлиновывает только там, где есть текст (если текста мало, то дописать от руки будет уже негде). Но идея интересная, спасибо большое, возьму на вооружение в других местах!
Честно говоря, непонятно, в чем проблема, либо непонятна задача.
Вот для примера код: jsfiddle.net/ADDYq/1/
Чем это отличается от того, что вам надо сделать?
Простой
