CODEWITHSUNDEEP
htmlcss
OpenUserX03
OpenUserX03

Reputation: 1458

CSS - setting table column height percentage changes row height

I have the following HTML and CSS:

table {
  border-collapse: collapse;
}
table.patients,
table.patients > tr {
  width: 100%;
}
table.patients td,
table.patients th {
  border: 1px solid black;
}
table.patients_patient_table tr,
table.patients_patient_table td {
  border: 1px solid red;
}
.patients_appointment {
  text-align: left;
  width: 25%;
}
.patients_patient {
  text-align: left;
  width: 25%;
  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;
}
<table class="patients">
  <tr class="patients_row">
    <td class="patients_appointment">12/20/2014 7:00am</td>
    <td class="patients_patient">
      <table class="patients_patient_table">
        <tr>
          <td>Smith, John</td>
          <td>55 Y</td>
        </tr>
        <tr>
          <td colspan=2>test</td>
        </tr>
      </table>
    </td>
    <td class="patients_patientID">5678</td>
    <td class="patients_sex">M</td>
    <td class="patients_physician">Dr. John Smith</td>
  </tr>
</table>

The results is the following table:

enter image description here

If I change the CSS for .patients_patient to this:

.patients_patient {
    text-align: left;
    width: 25%;
    height: 100%;
    padding: 0px;
}


table {
  border-collapse: collapse;
}
table.patients,
table.patients > tr {
  width: 100%;
}
table.patients td,
table.patients th {
  border: 1px solid black;
}
table.patients_patient_table tr,
table.patients_patient_table td {
  border: 1px solid red;
}
.patients_appointment {
  text-align: left;
  width: 25%;
}
.patients_patient {
  text-align: left;
  width: 25%;
  height: 100%;
  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;
}
<table class="patients">
  <tr class="patients_row">
    <td class="patients_appointment">12/20/2014 7:00am</td>
    <td class="patients_patient">
      <table class="patients_patient_table">
        <tr>
          <td>Smith, John</td>
          <td>55 Y</td>
        </tr>
        <tr>
          <td colspan=2>test</td>
        </tr>
      </table>
    </td>
    <td class="patients_patientID">5678</td>
    <td class="patients_sex">M</td>
    <td class="patients_physician">Dr. John Smith</td>
  </tr>
</table>

Then the height of the outer table row changes:

enter image description here

Why does this happen? What I really want is the result to look like this:

enter image description here

Edit: I am testing this on Chrome.

Upvotes: 1

Views: 2445

Answers (1)

Oriol
Oriol

Reputation: 288520

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.patients td,
table.patients th {
  border: 1px solid black;
}
table.patients_patient_table tr,
table.patients_patient_table td {
  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;
}
<table class="patients">
  <tr class="patients_row">
    <td class="patients_appointment">12/20/2014 7:00am</td>
    <td class="patients_patient">
      <table class="patients_patient_table">
        <tr>
          <td>Smith, John</td>
          <td>55 Y</td>
        </tr>
        <tr>
          <td colspan=2>test</td>
        </tr>
      </table>
    </td>
    <td class="patients_patientID">5678</td>
    <td class="patients_sex">M</td>
    <td class="patients_physician">Dr. John Smith</td>
  </tr>
</table>

Upvotes: 1

Related Questions