Table tr same height dynamic number of rows

Question

I search for a table thats tr height everytime is the same.

For example:

Even I add a rows, the height should stay the same.

I can do it with percentage because I don't know how many rows I get (calendar).

CSS:

 .cMid-Calender table{
    width:100%;
    height:calc(100% - 95px);
    table-layout:fixed;
    border-collapse: collapse;
    text-align:center; 
}
.cMid-Calender th{
    font-size: 14px;
    height:30px;
    font-weight: 300;
    color:#f333;
    text-align: left;
    padding-left:10px;
    background-color:#f8f8f8;
    height:25px;
}
.cMid-Calender td{
    border-top:1px solid #eaeaea;
    font-size: 22px;
    font-weight: 200;
    cursor: pointer;
    overflow: hidden;
    color:#767676;
    padding:0px;
    vertical-align: top;
    text-align: left;
}

Answer 1

As you stated you are using jquery, then you should be able to do something like this:

var maxHeight = 0;

// loop through and keep track of biggest height
$(".cMid-Calender td").each(function(index) {
    if($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    };
});

// set all elements to the biggest height
$(".cMid-Calender td").height(maxHeight);

you can wrap it in a function if you need to recalculate, such as when calendar items are added/removed