Как я могу заставить таблицы уважать сетку в Bootstrap 3?

Question

Таблицы Bootstrap не учитывают сетку, даже если они имеют классы col-xs-X.

Вот минимальный пример, который показывает, как таблица (красная) не совпадает с (серыми) сетками: http://jsfiddle.net/fm65v3e0/

.col-xs-1 { 
 
    background-color: #eee; 
 
    border: 1px solid #999; 
 
} 
 

 
th { 
 
    background-color: #fee; 
 
    border: 1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <div class="table-responsive"> 
 
     <table class="table"> 
 
      <tr> 
 
      <th class="col-xs-5"> 
 
       5-col header 
 
      </th> 
 
      <th class="col-xs-3"> 
 
       3-col header 
 
      </th> 
 
      <th class="col-xs-4"> 
 
       4-col header 
 
      </th> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Поскольку таблица появляется в колонке он имеет определенное количество дополнений снаружи. Если я удаляю прописку из столбцов, строка таблицы встает, но, конечно, теперь любой текст внутри столбца будет очищен от следующего столбца.

Кроме того, таблицы Bootstrap по умолчанию имеют ширину 100% и распределяют любое «запасное» пространство, если вы не используете все 12 столбцов.

Мой сайт почти полностью табличные данные, поэтому, если у меня нет таблиц, уважающих сетку, это немного похоже на то, что я не использую сетку вообще. Как вы думаете, я могу решить это легко? Ошибочно ли пытаться решить эту проблему?

Answer 1

Ваш загрузочный CSS-код добавляет padding-right: 15px и padding-left: 15px всем элементам col-xx-xx.

Удалить или переопределить прокладку, и все должно быть правильно выровнено. На приведенном ниже рисунке показано, что происходит в вашем Bootply при удалении прокладки.

Один из способов, чтобы переопределить это создать класс с именем no-padding так:

.no-padding { 
    padding-left: 0; 
    padding-right: 0 
} 

и применить его к любым элементам, где вы не хотите, набивка применяется. Here's an updated JS Fiddle showing this.