Удалить строки строк в Twitter-загрузчике

66

Я использую twitter bootstrap для некоторого веб-приложения, которое я вынужден делать (я не веб-разработчик), и я не могу найти способ отключить строки строк для таблиц.

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

Привет,

  • 1
    Попытался, что не может найти ничего, что было бы очевидно, ни один из элементов не включает использование какого-либо класса CSS.
Теги:

6 ответов

114
Лучший ответ

Добавьте это в свой основной CSS:

table td {
    border-top: none !important;
}

Используйте это для новых версий бутстрапа:

.table th, .table td { 
     border-top: none !important; 
 }
Поделиться
  • 0
    Не работает для меня Я поместил его в раздел html / head / style, но chrome отображает его как зачеркнутый, как будто он не используется. Есть идеи?
  • 3
    @MartinWickman этот ответ был написан для более ранней версии начальной загрузки (одна точка что-то за раз), поэтому для работы этого метода требуется правило !important .table th, .table td { border-top: none; } , но вы можете избежать этого, сделав селектор более конкретным, например: .table th, .table td { border-top: none; }
Показать ещё 5 комментариев
53

В Bootstrap 3 я добавил класс table-no-border

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td {
  border-top: none; 
}
Поделиться
  • 4
    Это решение работало для меня, в то время как другие не (включая решения здесь ). Использование Bootstrap 3 через bootstrap-sass в Rails.
  • 5
    Это работает. Должен быть главный ответ ИМО.
Показать ещё 1 комментарий
15

bootstrap.min.css более конкретна, чем ваша собственная таблица стилей, если вы просто используете .table td. Поэтому используйте это вместо:

.table>tbody>tr>th, .table>tbody>tr>td {
    border-top: none;
}
Поделиться
  • 0
    Мне нужно было сделать что-то похожее, чтобы нацелить всего несколько ячеек: .table > tbody > tr > td.no-line { border-top: none; }
  • 0
    Благодарю. Ваш метод помог мне.
Показать ещё 2 комментария
1

Это то, что сработало для меня..

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
  border-top: none !important; 
  border-bottom: none !important; 
}

Пришлось взломать! важно, чтобы он застрял.

Поделиться
  • 0
    это работает, но не так, это работа для использования !important
0

Получил тот же вопрос от друга. Мое предложение, которое не требует !Important, выглядит следующим образом: я добавляю пользовательский класс "no-border", который можно добавить в таблицу начальной загрузки.

.table.no-border tr td, .table.no-border tr th {
  border-width: 0;
}

Вы можете увидеть мое решение в здесь

Поделиться
0

В противном случае, если у вас есть проблемы, добавьте строки в свою панель, не забудьте добавить их в свой TABLE. По умолчанию (http://getbootstrap.com/components/#panels), предполагается добавить строку, но это помогло мне добавить тег, поэтому теперь отображаются строки строк.

Следующий пример "вероятно" не отображает строки между строками:

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>

В следующем примере будут отображаться строки между строками:

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <thead></thead>
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>
Поделиться
  • 0
    +1 за вертикальные границы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню