将垂直图表转换为水平图表CSS3

Question

我正在尝试将水平图转换为垂直图。我遇到了一个问题。当我将代码更改为水平时，我无法将连接到框的线显示在中间。我可以使这些框水平出现。

Orignal Codepen Demo

我的代码：

<div class="container">
    <table class="boxplot">
      <tr height="40">
        <td class="line boxplot-max"></td>
        <td class="boxplot-max"></td>
        <td class="boxplot-q3" colspan="4"></td>
        <td class="boxplot-mdn" colspan="4"></td>
        <td class="line boxplot-q1"></td>
        <td class="boxplot-q1"></td>
      </tr>
    </table>
</div>

JSFiddle Demo