HR（垂直線）延伸表格的其餘部分

我正在嘗試創建電子郵件簽名生成器。我試圖讓藍線（可以在程序中看到）一直延伸下去。但是，當我這樣做時，它會延伸其餘的項目。我相信這可能是因爲它全部在一張桌子裏面，當一個元素的大小與其他元素的大小不同時，它會嘗試將其平等化，但我不知道如何更改它。這裏是我的代碼：HR（垂直線）延伸表格的其餘部分

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或者其他東西），它不會用它來拉伸表格的其餘部分。如果您對我如何能夠以不同方式製作我的桌子有所瞭解，以便它可能更容易或只是爲了解決此問題，歡迎提供建議！

在此先感謝！

來源

2017-06-20 CyanCoding