HTML/CSS : Make Border-right height dynamic

Question

我正在处理大量遗留代码，所以这就是 HTML 样式错误的原因。我必须使用现有的东西，所以我真的不想尝试修复它并弄乱一切。

我正在尝试使右边框高度动态化(采用列的最长高度)。

这是我正在使用的 jsfiddle:http://jsfiddle.net/XmKrm/616/

<div id="MAIN">
<div id="ColumnOne">
  <table style="width: 100%">
    <tr>
      <td>111  <br/>
      111</td>
    </tr>
  </table>
</div>
<div id="ColumnTwo">
  <table style="width: 100%">
    <tr>
      <td>222</td>
    </tr>
  </table>
</div>
<div id="ColumnThree">
  <table style="width: 100%">
    <tr>
    <td>333 333 <br> 333 <br> 333 </td>
    </tr>
  </table>
</div>
<div id="ColumnFour">
  <table style="width: 100%">
    <tr>
      <td>444 444 <br> 444 444 <br> 444 444 <br> 444 </td>
    </tr>
  </table>
</div>

CSS

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
  float: left;
  border-right: 1px solid;
}

Answer 1

#ColumnOne,
#ColumnTwo,
#ColumnThree,
#ColumnFour {
  border-right: 1px solid;
  display: table-cell;
  vertical-align: top;
}

<div id="ColumnOne">
  <div class="Coltop">SAMPLE TITLE</div>
  <div class="ColMid">
    <table style="width: 100%">
      <tr>
        <td>111
          <br/> 111
        </td>
      </tr>
    </table>
  </div>
</div>
<div id="ColumnTwo">
  <table style="width: 100%">
    <tr>
      <td>222</td>
    </tr>
  </table>
</div>
<div id="ColumnThree">
  <table style="width: 100%">
    <tr>
      <td>333 333
        <br> 333
        <br> 333
      </td>
    </tr>
  </table>
</div>
<div id="ColumnFour">
  <table style="width: 100%">
    <tr>
      <td>444 444
      <br> 444 444
      <br> 444 444
      <br> 444 </td>
    </tr>
  </table>
</div>