CSS - 设置表列高度变化百分比行高(CSS - setting table column he

我有以下的HTML和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>

结果如下表：

如果我更改CSS的.patients_patient这样：

.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>

随后，外表行的变化高度：

为什么会出现这种情况？我真正想要的是结果是这样的：

编辑：我在Chrome测试此。

你的第一个代码使用

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

根据表高度算法，

表的高度由给定的“高度”的“表”或“内联表”元素属性。

然而，有一个问题，因为height是一个百分比：

百分率的计算相对于所生成的框的高度包含块。如果没有明确指定的包含块的高度（即，它取决于内容的高度），并且该元件没有绝对定位，该值计算为“自动”。

解决这个问题的方法是指定一个明确的height为td.patients_patient ，因为你在你的第二个代码所做的：

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

但是，现在有一个问题：

CSS 2.1没有定义时如何使用百分比值指定自己的身高表格单元格和表行的高度计算。

所以你不能用一个百分比。不过不要担心：

一个“表行”元件的盒子的高度被计算一次所述用户代理具有可用的行中的所有单元：它是最大行的计算的“高度” ，计算出的“高度”的行中的每个小区的，和所需的由细胞的最小高度（MIN）。

因此，你可以使用不超过该行的计算的任何值height ，计算出的height其它细胞，并通过细胞所需的最小高度。使用更大的价值也将工作，但该行的高度将增加。

例如，你可以使用

.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>