CSS - 设置表列高度百分比更改行高

Question

我有以下HTML和CSS：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果如下表所示：

如果我将.patients_patient的CSS更改为：

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然后外表行的高度改变：

为什么会这样？我真正想要的是看起来像这样的结果：

编辑：我正在Chrome上对此进行测试。

Answer 1

您的第一个代码使用

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

根据Table height algorithms，

  

表的高度由'height'属性给出   'table'或'inline-table'元素。

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

  

百分比是根据高度来计算的   生成的框containing block。如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的值   计算'自动'。

解决该问题的方法是为height指定明确的td.patients_patient，就像在第二个代码中所做的那样：

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

然而，现在还有另一个问题：

  

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

所以你不能使用百分比。但别担心：

  

用户计算“table-row”元素框的高度   agent有行中的所有单元格可用：它是最大的单元格   行的计算'height'，每个单元格的计算'height'   在行中，以及单元格所需的最小高度（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>