Как добавить границы в отзывчивую таблицу в Bootstrap 3

У меня возникли проблемы с добавлением границ в отзывчивую таблицу с помощью bootstrap.

<div class="panel">
    <div class="table-responsive text-center">

    <table class="table table-bordered">
        <thead> ... </thead>
        <tbody> ... </tbody>
    </table>

    </div>
</div>

Граничная таблица работает только в том случае, если я удаляю класс "table-responsive".

Чего не хватает моему коду, чтобы он работал и с этим классом?

2 3
css3 html5 twitter-bootstrap twitter-bootstrap-3

2 ответа:

Похоже, что ваш класс панели имеет одно свойство css

.panel>.table-bordered, .panel>.table-responsive>.table-bordered {border:0;}

И это делает внешнюю границу вашей таблицы невидимой. Вы можете явно предоставить

border: 1px solid #ddd !important; если понадобится.

<div class="panel">
    <div class="table-bordered table-responsive text-center">

    <table class="table table-bordered" style="border: 1px solid: #ddd !important;">
        <thead> ... </thead>
        <tbody> ... </tbody>
    </table>

    </div>
</div>

Или вы можете удалить класс panel и использовать что-то другое. Это тоже может сработать. Вы всегда можете посмотреть, чтобы проверить элемент, чтобы увидеть, какие классы и какие свойства css использует любой элемент.

Все равно вы не получите границу. Также убедитесь, что цвет границы таблицы и цвет фона это не одно и то же.

6

Я тоже вижу этот вопрос случайно. Очень интересно, что я нашел:

Внутри медиа-запроса screen and (max-width: 767px), Что означает на узкоэкранном устройстве, или внутри панели,

.table-responsive > .table-bordered установлены, чтобы не иметь границ в Bootstrap 3. Я не знаю никакой причины для Бутстрэпа намеренно делать это.

Эта часть исходного кода Bootstrap 3 выглядит следующим образом: 

@media screen and (max-width: 767px) {
...
  .table-responsive > .table-bordered {
    border: 0;
  }
...
}

.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}

Update: я вроде как знаю причину, по которой Bootstrap делает это. Для узкого экрана <div class="table-responsive"> имеет саму границу. Кроме того, если a граничная таблица является прямым потомком <div class="panel">, панель будет действовать как граница этой таблицы. Поэтому Bootstrap намеренно удалил внешнюю границу вашего стола внутри этих дивов.

Вы ничего не пропускаете в своем коде. Вы просто не используете его так, как рекомендует Bootstrap.

3