Проблема с получением элементов в соседних ячейках таблицы для выравнивания по вертикали

Question

У меня большая проблема со стилем некоторых строк таблицы. Согласно этому скриншоту:

Синие и красные кружки - это ячейки в строке таблицы (высота которой составляет 50 пикселей). Оба стиля имеют «вертикальное выравнивание: верх». Данные телефонного номера (в красном круге) на самом деле представляют собой строку с разделителями, где я заменил разрывы HTML для каналов.

В зеленом круге метка факса обозначена «вертикальное выравнивание: верх», но фактический список номеров факсов (также с разделителями) выровнен по вертикали: среднее.

Я хочу, чтобы эти вещи были аккуратно выровнены, а верхний номер телефона / факса был выровнен по вертикали с этикеткой. Является ли причина этой проблемы моей заменой разрывов труб в строках телефона / факса? Есть ли способ получить то, что я хочу, без изменений в таблице / приложении базы данных?

Обновление : Я выполнил это с помощью некоторого заполнения ячейки таблицы. Я говорю вроде как, потому что это в основном выглядит выровненным, но у меня возникает ощущение, что это происходит не потому, что я этого хочу, а из-за случайного случая. И это однажды предаст меня, когда мне нужно, чтобы это выглядело лучше всего.

Answer 1

Попробуйте следующий CSS:

table td, table th {
    vertical-align: top;
}

Вы, вероятно, не должны полагаться на valign и прочее, которое давно заменено CSS.

Answer 2

Я согласен с реализацией CSS Parrot для этого, вы также должны заметить, что наличие разных шрифтов и размеров шрифта в ячейках приведет к тому, что они будут смещены, даже если к каждому из них применен один и тот же стиль. Если выравнивание важно для внешнего вида создаваемой страницы, я хотел бы снова разделить данные и сделать каждый номер телефона / факса отдельным заголовком со строкой заголовка «Телефон» и «Факс», имеющей colspan="2" .

*------------------------*
| Phone:                 |
|------------------------|
|   Back: | xxx-xxx-xxxx |
|------------------------|
|  Front: | xxx-xxx-xxxx |
|------------------------|
| Fax:                   |
... etc.             

И нет, замена | на <br /> не окажет негативного влияния на внешний вид таблиц, если нет никаких LEADING | s.

Answer 3

Вы называете их метками (как они семантически), вы тоже используете метку меток? если это так, проверьте, не применены ли к нему некоторые правила CSS, которые портят ситуацию.

1-й (синий / красный) это кажется странным, если они оба являются valign: top. Вы проверили, применяется ли к метке какое-либо верхнее поле или отступ, или какое-то правило CSS с вертикальным выравниванием: среднее?

2-й корпус (зеленый), вам также необходимо выровнять их по верху. если одна середина, а другая вершина, вы никогда не сможете выровнять их ..