Таблица: одинаковая высота для ячеек в строках

Question

Я столкнулся со следующей проблемой.У меня есть устаревшее приложение с макетом на основе таблицы.

В одном случае у меня есть вложенные таблицы, в которых я хочу иметь одинаковую высоту для двух внутренних таблиц в одной строке.

См. Здесь:

http://jsfiddle.net/q6aZ3/

Я хочу иметь одинаковую высоту как для зеленого, так и для красного внутреннего стола.

Надеюсь, кто-то может помочь.

РЕДАКТИРОВАТЬ: Высота внутренних таблиц должна быть гибкой, только в этом примере я использовал фиксированный с для одной из внутренних таблиц, это не нормальнослучай.

Answer 1

как упоминалось выше о высоте на одном столе, но не на другом, вы можете добавить желаемую высоту на родительский элемент tr и затем оставить обе вложенные таблицы (с зеленым и красным фоном) на height = 100%, чтоони оба уже имеют через свои атрибуты HTML

<table>
   <tr style="height: 400px;">...
     ....

   <table style="background:green" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
    ....

   <table style="background:red" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">

http://jsfiddle.net/clairesuzy/q6aZ3/4/

Answer 2

это происходит потому, что красный table имеет встроенный css height:400px.Добавьте height:400px для красного table также, и они будут иметь одинаковую высоту.

Демо: http://jsfiddle.net/q6aZ3/1/

Answer 3

Как упоминал Сотирис, это потому, что на одном у вас есть встроенное объявление высоты;но не для второго.Если вы хотите, чтобы они оба имели переменную высоту и всегда имели одинаковую высоту, вы можете сделать это с помощью некоторого JavaScript:

$(document).ready(function() {
    var green = $('#ext-gen1611'), red = $('.newframeContainer');
    if(red.height() > green.height()) {
        green.height(red.height());
    } else {
        red.height(green.height());
    }
});