twitter-bootstrap - 带有 Twitter Bootstrap 的括号显示

Question

如何在括号之间画线，如图所示？

这就是我当前的 HTML 的样子（下面是 jsfiddle 的链接）。

<div class="row">
  <div class="col-md-4">
      <table class="table-condensed" style="width:100%">
        <tr>
          <td class="col-md-5"><div class="input-group"><div class="form-control">Team 1</div><span class="input-group-addon"><span class="badge pull-right">1</span></span></div></td>
          <td class="col-md-2" rowspan="2">L</td>
          <td class="col-md-5" rowspan="2"><div class="input-group"><div class="form-control">Team 1</div><span class="input-group-addon"><span class="badge pull-right">0</span></span></div></td>
        </tr>
        <tr>
          <td><div class="input-group"><div class="form-control">Team 2</div><span class="input-group-addon"><span class="badge pull-right">0</span></span></div></td>
        </tr>
      </table>
  </div>
</div>

http://jsfiddle.net/XY8Hs/

Answer 1

我的一个朋友向我暗示了正确的方向，我做了这个（下面是相关代码和更新的小提琴）：

        <td class="col-md-2" rowspan="2" style="padding:0px;">
          <div style="border-top: 2px solid #090; border-right: 2px solid #090; width:80%; height:25%; float: left; position:absolute; top:25%;"></div>
          <div style="border-bottom: 2px solid #f00; border-right: 2px solid #f00; width:80%; height:25%; float: left; position:absolute; top:50%;"></div>
          <div style="border-top: 2px solid #090; width: 20%; margin-left: 80%; float: right; position:absolute;"></div>
        </td>

http://jsfiddle.net/XY8Hs/60/