HTML таблицы в таблицах высотой 100%

Question

У меня странная проблема с моим ростом столов.

У меня есть родительская таблица (я знаю, я знаю таблицы ... но у меня нет выбора :(), в которой есть одна строка ... которая содержит 2 ячейки. У каждой ячейки есть собственная таблица. Детиу таблиц есть граница вокруг них. Я бы хотел, чтобы они обе оставались одинаковой высоты, чтобы границы выравнивались независимо от того, сколько контента в них. (они имеют гибкий объем контента, поэтому его нельзя установить)

Если вы возьмете приведенный ниже код и поместите его в html-файл, вы увидите (по крайней мере, в Chrome), что правая дочерняя таблица не заполняет 100% своей ячейки, в которой она находится. Если вы удалите «height: auto» народительская таблица. тогда она работает, но она также делает родительскую таблицу на 100% высотой.

Почему эти две вещи влияют друг на друга?

<style>
.cl2_h { background:red; }
.cl1_h { background:blue;}
.cl1, .cl2{ width:100%; border:1px solid black;}
table, tbody { height:100%; }
</style>


<table style="border:1px solid red;height:auto;">
<tbody>
<tr style="height:100%;">
    <td style="width:50%">
        <table class="cl2" style="text-align:left;">
            <tbody>
                <tr class="cl2_h">
                    <td>
                        RANDOM TEXT HERE
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>Select which asd asdthis item relates to.</span>
                        <ul>
                            <li>
                                <select>
                                    <option value="-1">Please Select...</option>
                                </select>
                            </li>
                            <li>
                                <select>
                                    <option value="302">Please Select...</option>
                                </select>
                            </li>
                        </ul>
                        SOME RANDOM TEXT
                    </td>
                </tr>
            </tbody>
        </table>
    </td> 
    <td>
        <table class="cl2" style="height:100%">
            <tbody>
                <tr class="cl2_h">
                    <td>
                        asd asd asd asda sda(NTF)
                    </td>
                </tr>
                <tr>
                    <td>
                        DROPDOWNLIST Here
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>

Следует отметить, что если яустановите для родительского элемента значение 200px, после чего оно продолжит работать ... Так что, я думаю, реальный вопрос заключается в том, почему он не работает, когда внутри родительской таблицы высотой "Auto"

Answer 1

Стив, "height: auto" не сообщает браузеру во время рендеринга, какой будет конечная высота содержащей таблицы, поэтому синтаксически лишние 100% на дочерних таблицах.

Только если выпередайте css с указанной высотой (или не указывайте высоту) родительскому контейнеру, будут ли дети знать, что означает "100%" при рендеринге.

Если вы ДОЛЖНЫ оставить height: auto в родительской таблице, тогда @RobBимеет хорошее решение javascript, но я бы порекомендовал либо установить конкретную высоту для родительской таблицы, либо не устанавливать ее вообще, если вы можете помочь.

Answer 2

Вы можете сделать это, используя Javascript / jQuery:

var maxHeight; 
$('.cl2').each(function() { 
    maxHeight = Math.max(maxHeight, $(this).height()); 
}).height(maxHeight);