Сделайте размер таблицы в TD таким же, как содержащий TD

Question

Для чего мне нужно сделать, мне нужно иметь таблицу в TD другой таблицы, и ячейки этой таблицы должны иметь ту же высоту и ширину, что и содержащая таблица.

Несколько замечаний:

Содержащий TD не может иметь фиксированную ширину или высоту, она создается динамически, в зависимости от размера данных, поступающих в исходную таблицу, так что это исключает возможность для меня использовать высота и ширина: 100% на внутренней таблице (что возможно только в том случае, если родительский контейнер имеет фиксированную ширину или высоту).

В настоящее время высота стола установлена ​​на 100 пикселей, поэтому его легче видеть на рисунке ниже с помощью сделанных на нем нот, он не может иметь фиксированную высоту, потому что содержимое ячейки 1 и ячейки 2 необходимо быть в самой верхней части ячеек, что, в свою очередь, должно быть в самом верхнем и нижнем пределах содержащего TD.

HTML, и CSS для всей таблицы массивен, поэтому здесь только от удерживающей TD на до держать его в чистоте:

.bottomAlign { 
 
    vertical-align: bottom; 
 
} 
 

 
.innerTable { 
 
    height: 100px; 
 
} 
 

 
.topAlign { 
 
    vertical-align: top; 
 
}

<td> 
 
    <table class="innerTable"> 
 
    <tr class="topAlign"> 
 
     <td>Cell 1</td> 
 
    </tr> 
 
    <tr class="bottomAlign"> 
 
     <td>Cell 2</td> 
 
    </tr> 
 
    </table> 
 
</td>

Вот картинка для справки:

Answer 1

Вот скрипку эмуляция тд динамически размера, вместе с фрагментом, чтобы изменить размер внутренней таблицы

http://jsfiddle.net/v6hg9vdt/

Это единственная часть скрипку, которая имеет значение, остальное было просто изменить размер внешнего TD

var inner = $('.innerTable'); 
var setInnerSize = function(){ 
    inner.width(inner.parent().width()); 
    inner.height(inner.parent().height()); 
};