Come utilizzare il sistema di griglia Bootstrap 3 con componente tabella?

Question

ho iniziato una migrazione di sistema griglia utilizzando Bootstrap 3, ma gli esempi nella documentazione sono tutti utilizzando DIV: http://getbootstrap.com/css/#grid

Ho fatto un codice alquanto ridondante che mescola le classi DIV con tavolo tag/classi: http://getbootstrap.com/css/#tables

Il problema è che il layout disturba i bordi e penso che dovrebbe essere un modo migliore per farlo. Qualche raccomandazione su questo?

Un codice di esempio in Fiddle: 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> 

Grazie in anticipo.

Answer 1

Rimuovere la classe row dagli elementi <tr>. Quella classe rende un elemento non riga di tabella simile a una riga di tabella e aggiunge alcuni stili che interrompono uno standard <tr>. È comunque possibile utilizzare le classi "col" come normale:

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