Question

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

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

输出： enter image description here

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

CSS应用于表格（来自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

值（表格单元格）

基线（以及sub，super，text-top，text-bottom，和）将单元格的基线与所有基线对齐   行中与基线对齐的其他单元格。

顶部将单元格的顶部填充边缘与行顶部对齐。

middle 将行中单元格的填充框居中。

bottom 将单元格的底部填充边缘与行的底部对齐。

More Details

使用我的CSS，HTML表rowspan无法正常工作

1 个答案: