Высота ячейки CSS

Question

У меня проблема со следующим html / css:

http://jsfiddle.net/QYVPb/

<table cellpadding="0" cellspacing="0" style="background:#FAFAFA; border:1px solid black">
  <tbody>
    <tr>
      <td style="height:100%; padding:5px">
        <table cellpadding="0" cellspacing="0" style="table-layout:fixed; height:100%">
          <tbody>
            <tr>
              <td style="padding:10px; font-weight: 700; text-align: center; background: #E0E0E0">Some Text</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="height:100px; padding:10px">This cell controls the height</td>
    </tr>
  </tbody>
</table>

Тип документа - HTML 5.

HTML отображаеткак я бы хотел в Firefox (9.0 бета).

В IE, Opera, Chrome & Safari фон ячейки "Some Text" не заполняет содержащую ячейку.

Структура html довольно негибкая - этот html является упрощенной структурой гораздо более крупного приложения.

Я надеюсь, что какой-то простой CSS поможет решить проблему.

Answer 1

Вам необходимо установить высоту родительской таблицы: http://jsfiddle.net/QYVPb/1/

<table cellpadding="0" cellspacing="0" style="height:100px; background:#FAFAFA; border:1px solid black">

Answer 2

На самом деле Firefox неправильно отображает: CSS свойство height будет только работать, если родительский элемент имеет объявленную высоту.

Вы можете попробовать следующий обходной путь, который устанавливает bgcolor для родительского td:

http://jsfiddle.net/QYVPb/2/

Answer 3

Удалите padding:5px из вашего первого <td> элемента.

Answer 4

На самом деле, я верю, что это так.У вас есть стиль padding:5px для самого внешнего td, но серый внутренний CSS-фон применяется к внутреннему td.Отсюда и интервал вокруг серой клетки.Если я уберу отступ, серый заполнит левую ячейку.