2

画像に示すようにブラケット間に線を引くにはどうすればよいですか?

望ましい結果

これが現在の 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/

4

1 に答える 1

4

私の友人が正しい方向に私をほのめかし、私はこれを作りました（以下は関連するコードと更新されたフィドルです）：

ここに画像の説明を入力

        <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/

于 2013-09-30T17:28:01.180 に答える