How to use Bootstrap 3 grid system with table component?

Question

I have started a migration to grid system using Bootstrap 3, but the examples in the documentation are all using DIVs: http://getbootstrap.com/css/#grid

I made a somewhat redundant code that mixes the DIV classes with TABLE tags/classes: http://getbootstrap.com/css/#tables

The problem is that the layout dobles the borders and I think the should be a better way of doing that. Any recommendations on that?

An example code 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> 

Thanks in advance.

Answer 1

Remove the row class from your <tr> elements. That class makes a non-table-row element look like a table-row and adds some styles that break a standard <tr>. You can still use the "col" classes like normal:

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