HTML Table rowspan 在我的 CSS 上工作不正常

Question

我有一个非常简单的 table，有两列和两行，第一列（图像）跨越两行，但问题是它确实创建了两行的单元格，但不使用第二个细胞。请参见以下代码和图像。

<table border="1">
    <tbody>
        <tr>
            <td rowspan="2"> <img src="images/listentest.jpg"> </td>
            <td>PROVIDING COMFORT AND SUPPORT</td>
        </tr>
        <tr>
            <td>In this dialogue, a nurse meets with a worried and anxious client at a cardiac clinic.</td>
        </tr>
    </tbody>
</table>

输出：

我认为可能有一些 CSS 属性影响显示。有什么想法吗？

CSS 应用于 Table（来自 chrome 的计算样式）：

  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
  border-bottom-color: rgb(0, 0, 0);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-collapse: collapse;
  border-image-outset: 0px;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgb(0, 0, 0);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgb(0, 0, 0);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgb(0, 0, 0);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  color: rgb(119, 119, 119);
  display: block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17.3333339691162px;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: 300;
  height: 123px;
  letter-spacing: -0.260000020265579px;
  line-height: 28.6000003814697px;
  margin-bottom: 20px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 40px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  text-align: right;
  vertical-align: baseline;
  width: 800px;

CSS 应用于行 (TR)：

  background-color: rgb(248, 248, 248);
  border-bottom-color: rgb(229, 229, 229);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-collapse: collapse;
  border-image-outset: 0px;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgb(119, 119, 119);
  border-left-style: none;
  border-left-width: 0px;
  border-right-color: rgb(119, 119, 119);
  border-right-style: none;
  border-right-width: 0px;
  border-top-color: rgb(229, 229, 229);
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  color: rgb(119, 119, 119);
  display: table-row;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17.3333339691162px;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: 300;
  height: 91px;
  letter-spacing: -0.260000020265579px;
  line-height: 28.6000003814697px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  text-align: right;
  vertical-align: baseline;
  width: 712px;

Answer 1

这正在影响：vertical-align: baseline;

见DEMO

Values (for table cells)

baseline (and sub, super, text-top, text-bottom, , and ) Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

top Align the top padding edge of the cell with the top of the row.

middle Center the padding box of the cell within the row.

bottom Align the bottom padding edge of the cell with the bottom of the row.

More Details

HTML Table rowspan 在我的 CSS 上工作不正常

HTML Table rowspan is not working correct with my CSS

html

css

html-table