twitter bootstrap - modal - ¿Cómo utilizar el sistema de rejilla Bootstrap 3 con componente de tabla?

tablas bootstrap 4

Question

He iniciado una migración al sistema grid utilizando Bootstrap 3, pero los ejemplos en la documentación son todos utilizando DIV: http://getbootstrap.com/css/#grid

Hice un código algo redundante que mezcla las clases DIV con las etiquetas / clases TABLE: http://getbootstrap.com/css/#tables

El problema es que el diseño duplica los bordes y creo que debería ser una mejor manera de hacerlo. ¿Alguna recomendación sobre eso?

Un código de ejemplo en 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>

Gracias por adelantado.

Answer 1

Elimine la clase de row de sus elementos <tr> . Esa clase hace que un elemento que no sea una fila de tabla se vea como una fila de tabla y agrega algunos estilos que rompen un estándar <tr> . Todavía puedes usar las clases "col" como 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>