Css - Setting Table Column Height Percentage Changes Row Height

I have the following HTML and CSS: The results is the following table: If I change the CSS for .patients_patient to this: .patients_patient { text-align: left; width: 25%

Solution 1:

Your first code uses

td.patients_patient {
  height: auto; /* default value */
}
td.patients_patient > table.patients_patient_table {
  height: 100%;
}

According to Table height algorithms,

The height of a table is given by the 'height' property for the 'table' or 'inline-table' element.

However, there is a problem, because the height is a percentage:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

A way to solve that issue is specifying an explicit height for td.patients_patient, as you did in your second code:

td.patients_patient {
  height: 100%;
}
td.patients_patient > table.patients_patient_table {
  height: 100%;
}

However, now there is another problem:

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

So you can't use a percentage. But don't worry:

The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells.

Therefore, you can use any value not greater than the row's computed height, the computed height of other cells, and the minimum height required by the cells. Using greater values would also work, but the height of the row would be increased.

For example, you can use

.patients_patient {
    height: 0;
}

table {
  border-collapse: collapse;
}
table.patients,
table.patients > tr {
  width: 100%;
}
table.patientstd,
table.patientsth {
  border: 1px solid black;
}
table.patients_patient_tabletr,
table.patients_patient_tabletd {
  border: 1px solid red;
}
.patients_appointment {
  text-align: left;
  width: 25%;
}
.patients_patient {
  text-align: left;
  width: 25%;
  height: 0;
  padding: 0px;
}
.patients_patientID {
  text-align: left;
  width: 15%;
}
.patients_sex {
  text-align: left;
  width: 10%;
}
.patients_physician {
  text-align: left;
  width: 25%;
}
.patients_row {
  height: 4em;
}
.patients_patient_table {
  width: 100%;
  height: 100%;
}
body {
  font-family: verdana, sans-serif;
  margin: 0;
  padding: 0;
}

<tableclass="patients"><trclass="patients_row"><tdclass="patients_appointment">12/20/2014 7:00am</td><tdclass="patients_patient"><tableclass="patients_patient_table"><tr><td>Smith, John</td><td>55 Y</td></tr><tr><tdcolspan=2>test</td></tr></table></td><tdclass="patients_patientID">5678</td><tdclass="patients_sex">M</td><tdclass="patients_physician">Dr. John Smith</td></tr></table>