Как создать равномерную высоту для ячеек заголовка таблицы

Question

У меня есть несколько элементов заголовка таблицы, которые имеют завернутый текст, с которым я в порядке. Тем не менее, заголовки имеют фоновый цвет, и он выглядит неудобно, имея разные высоты между однолинейными, а другие - 2 строки (завернутые).

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

Когда я изменяю высоту линии, что увеличивает интервал на обернутых ячейках, так что в основном ячейки заголовка по-прежнему различаются по высоте.

<table class = "large_headers"> 
    <tr> 
     <th>Test1</th> 
     <th>Test2</th> 
    </tr> 
    <tr> 
     <td>abc</td> 
     <td>def</td> 
    </tr> 
</table> 

.large_headers th{ 
    display: table-cell; 
} 

Answer 1

Ваша разметка недействительна. Попробуйте это:

<table class = "large_headers"> 
    <tr> 
     <th>Test1 foobar foobar</th> 
     <th>Test2</th> 
    </tr> 
    <tr> 
     <td>abc</td> 
     <td>def</td> 
    </tr> 
</table> 

С помощью этого CSS:

.large_headers th{ 
    background-color:red; 
    width:20px; 
} 

Fiddle здесь: http://jsfiddle.net/wLEu8/

Answer 2

th s должна принадлежать в tr как td.