HTML Table rowspan is not working correct with my CSS

Question

I have a very simple table with two columns and two rows, the first column (image) spans over two rows but the problem is that it does create the cell over two rows but does not use the second cell. See the following code and image.

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

Output:

I think there may be some CSS attribute affecting the display. Any idea?

CSS Applied on Table (Computed style from 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 Applied on Rows (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

This is effecting: vertical-align: baseline;

See 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