Как я могу иметь фиксированную высоту для ячеек таблицы в Firefox? Следующее работает в IE и Chrome, но Firefox не использует указанную высоту:
<!DOCTYPE html>
<html>
<head>
<title>Table Cell Height Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.overlay {
border-collapse: collapse;
table-layout: fixed;
position: fixed;
top: 0px;
left: 0px;
}
.overlay th {
padding: 4px;
border: 1px solid black;
background-color: white;
}
.test {
border-collapse: collapse;
table-layout: fixed;
}
.test th {
padding: 4px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<table class="overlay">
<thead>
<tr>
<th style="height: 42px;">Staff</th>
</tr>
</thead>
</table>
<table class="test">
<thead>
<tr>
<th style="height: 42px;">Staff</th>
<th style="height: 42px;">Monday<br>
27th</th>
</tr>
</thead>
</table>
</body>
</html>
Цель состоит в том, чтобы перекрыть ту же высоту, что и тестовый стол.
Одно решение, которое я нашел, - это обернуть содержимое ячейки в div и установить высоту в div.
Другое решение, которое я нашел, - это использование jQuery,
$('table.overlay tr').height($('table.test tr').outerHeight());
Есть ли другие решения?