Сделайте цвет фона <div>заливкой <td> - PullRequest
Новая
       26

Сделайте цвет фона <div>заливкой <td>

9 голосов
/ 01 декабря 2011

У меня есть таблица HTML, ячейки которой содержат div s с display:inline-block, содержащие текст различных размеров.

Мне нужно, чтобы текст выровнялся по базовой линии, и мне нужны цвета фона div s, чтобы заполнить высоту ячеек. Для самого большого шрифта цвет фона заполняет ячейку , но не для мелких шрифтов:

How it looks in Firefox

Возможно ли это? Очевидные решения, такие как div { height:100% }, похоже, ограничены различными размерами шрифта.

Вот код на данный момент: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    table td {
        vertical-align: baseline;
        padding: 0;
    }

    td div {
        display: inline-block;
    }
  </style>
</head>
<body>
    <table>
        <tr>
            <td style="background-color:cyan">
                <div style="background-color:pink;">Pink</div>
                <div style="background-color:green;">Green</div>
            </td>
            <td style="background-color:cyan">
                <div style='font-size: 40pt; background-color:yellow;'>
                    Big yellow text
                </div>
            </td>
            </tr>
  </table>
</body>
</html>

Это также на jsfiddle здесь .

Ответы [ 3 ]

2 голосов
/ 01 декабря 2011

Быстрое и грязное исправление:

CSS 

div {
    line-height:60px;
    height:60px;
    vertical-align:middle;
}

Демо: http://jsfiddle.net/2YbBg/

1 голос
/ 01 декабря 2011

Не идеально, но самое близкое, что я мог получить:

http://jsfiddle.net/gfPkV/14/

0 голосов
/ 01 декабря 2011

Я прочитал один раз, что td не сообщает о своей высоте.Так что любые height: 100% или height:auto и т. Д. Не будут работать.

Так что мое решение здесь: http://jsfiddle.net/UGTYP/

Изменяет высоту "розового" текста на высоту"желтого" div с javascript.

...