テーブルコンポーネントを持つブートストラップ3グリッドシステムの使用方法は？

Question

私はブートストラップ3を使用して、グリッドシステムへの移行を開始しましたが、マニュアルの例では、すべてのdiv要素を使用している： http://getbootstrap.com/css/#grid

私はTABLEタグ/クラスとDIVクラスをミックスやや冗長なコード作ら： http://getbootstrap.com/css/#tablesを

問題は、レイアウトによって境界がぼやけてしまうことです。これを行うにはより良い方法が必要だと思います。それに関する勧告？

フィドルのコード例：事前にhttp://jsfiddle.net/7g8nV/1/

<div class="table-responsive"> 
    <table class="table table-bordered"> 
    <tr class="row"> 
    <td class="field-label col-md-3 active"> 
     <label>Field 1:</label> 
    </td> 
    <td class="col-md-9"> 
     Value 1 
    </td> 
    </tr> 
    <tr class="row"> 
    <td class="field-label col-md-3 active"> 
     <label>Field 2:</label> 
    </td> 
    <td class="col-md-9"> 
     Value 2 
    </td> 
    </tr> 
    <tr class="row"> 
    <td class="field-label col-md-3 active"> 
     <label>Field 3:</label> 
    </td> 
    <td class="col-md-9"> 
     Value 3 
    </td> 
    </tr> 
</table> 
</div> 

感謝。

Answer 1

<tr>要素からrowクラスを削除します。そのクラスはテーブル行以外の要素をテーブル行のように見せ、標準を破るいくつかのスタイルを追加します<tr>。国境を倍増していないようだ

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 
<table class="table table-bordered"> 
 
    <tr> 
 
    <td class="field-label col-xs-3 active"> 
 
     <label>Field 1:</label> 
 
    </td> 
 
    <td class="col-md-9"> 
 
     Value 1 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="field-label col-xs-3 active"> 
 
     <label>Field 2:</label> 
 
    </td> 
 
    <td class="col-md-9"> 
 
     Value 2 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="field-label col-xs-3 active"> 
 
     <label>Field 3:</label> 
 
    </td> 
 
    <td class="col-md-9"> 
 
     Value 3 
 
    </td> 
 
    </tr> 
 
</table>