25

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.

Pierre de LESPINAY
  • 44,700
  • 57
  • 210
  • 307
staticdev
  • 2,950
  • 8
  • 42
  • 66

1 Answers1

55

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>
Ross Allen
  • 43,772
  • 14
  • 97
  • 95
  • 3
    so no class or "row" is required in a div wrapping the table? or essentially the table class is accomplishing the same thing as the row class does when used on divs? thanks! - @ssorallen – timbrown Oct 29 '13 at 16:25
  • 5
    The [`col-xs-X` classes](https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L903) set percentage widths, which work by default for `` elements. You don't need to use the `row` class at all. – Ross Allen Oct 29 '13 at 17:28
  • 4
    NB: It's better to set the width classes in `` or `` rather than individual cells. And any form controls (inputs etc.) in the cell need to have the form-control class applied. – Jamie Ide Dec 04 '13 at 21:21