Check out this code snippet on jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/
To address the limitation of css height: 100% only working if the element's parent has an explicitly defined height, this jQuery script adjusts the cell height. Is there a more efficient method to achieve the same result?
<script type="text/javascript">
$(function(){
$('.myTable2 tr').each(function(){
var H1 = $(this).height(); // Retrieve row height
$(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to match row height
});
});
</script>