html - HR(垂直线)拉伸(stretch)表格的其余部分

Question

我正在尝试创建电子邮件签名生成器。我试图让蓝线(在程序中可以看到)一直向下延伸。但是，当我这样做时，它会拉伸(stretch)其余元素。我相信这可能是因为它都在一个表中，当一个元素的大小与其他元素不同时，它会尝试使其相等，但我不确定如何更改它。这是我的代码:

table {
  display: inline-block;
}

#image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.spacer {
  width: 30px;
}

hr {
  height: 200px;
  width: 7.5px;
  border-radius: 20px;
  border: none;
  background-color: cornflowerBlue;
}

#fullName {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 24px;
  color: orange;
}

#job {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  padding-top: 11px;
}

#jobLocationText {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  padding-top: 6px;
}

<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
  <tr>
    <td>
      <img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
    </td>
    <td class="spacer"></td>
    <td>
      <hr>
    </td>
    <td class="spacer"></td>
  </tr>
  <tr>
    <td>
      <center>
        <div id="fullName">Billy Staples</div>
      </center>
    </td>
  </tr>
  <tr>
    <td>
      <center>
        <div id="job"><i>Programmer</i></div>
      </center>
    </td>
  </tr>
  <tr>
    <td>
      <center>
        <div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
      </center>
    </td>
  </tr>
</table>

可以找到工作版本here .

同样，我试图让 hr(在 CSS 中)在高度改变时(比如 300 或其他)不会拉伸(stretch)表格的其余部分。如果您对我如何能够以不同的方式制作我的表格有想法，以便它可能更容易或只是为了我可以解决这个问题，欢迎提出建议!

提前致谢!

Answer 1

使用 rowspan=""到 strech <hr>往下走，

<td rowspan="4">
  <hr>
</td>

这是您的更新代码，https://jsfiddle.net/he84kv8n/10/