Как удалить вертикальную границу таблицы в бутстрапе

Как удалить горизонтальную границу таблицы с помощью бутстрапа? Я хочу сохранить только вертикальную границу. Вот мой код:Как удалить вертикальную границу таблицы в бутстрапе

<table class="table table-bordered"> 
    <thead> 
     <tr> 
      <th>Home</th> 
      <th>Client</th> 
      <th>Setting</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>data1</td> 
      <td>data2</td> 
      <td>data3</td> 
     </tr> 
     <tr> 
      <td>data1</td> 
      <td>data2</td> 
      <td>data3</td> 
     </tr> 
     <tr> 
      <td>data1</td> 
      <td>data2</td> 
      <td>data3</td> 
     </tr> 
    </tbody> 
</table>

источник

2015-04-22 Developer_grt

У вас есть таблица Twitter Bootstrap и вы хотите удалить горизонтальную границу с помощью CSS? – Huey

Возможный дубликат [html make table border invisible] (http://stackoverflow.com/questions/1992767/html-making-table-borders-invisible). Речь идет о Drupal, но так как это всего лишь HTML и CSS, то такой же ответ должен иметь место. – Huey

Ваше название противоречит вашему вопросу :) –

Никогда не используйте! Важно, так как это плохая практика. Решение для ваших вопросов:

.table-bordered > tbody > tr > td, 
.table-bordered > thead > tr > td, 
.table-bordered { 
    border-bottom:0; 
    border-top: 0; 
}

Все горизонтальные границы исчезли, и остались только вертикальные границы.

источник

2015-04-22 11:25:31

Если вы не используете! Важно здесь, это будет зависеть от начальной загрузки, если вы поместите свой скрипт во внешний файл и связать скрипт ** перед ** bootstrap.css-файлом. Таким образом, добавление! Важно для переопределения здесь приемлемо. Посмотрите на мой ответ, который он использует! Важно, а также добавляет слой, который упрощает его кодирование. В этом случае отладка будет еще сложнее, если вы связали ее перед загрузкой. Плохая практика переопределять классы библиотек. Важное значение здесь совершенно приемлемо. Его очень важно использовать, важно, но если вы ** никогда не пользуетесь им, его не будет в первую очередь. – Ronnie

мы можем добавить наш собственный класс или идентификатор в таблицу и можем использовать этот стиль просто, добавив класс или идентификатор, который нам не нужно использовать! Important. –

Вы забыли добавить 'th' (ради полноты) – Jankapunkt

Попробуйте следующее:

table.table.table-bordered td{ 
    border: 0 none !important; 
}

Это удаляет все границы из-за стола.

источник

2015-04-22 10:59:51 Huey

.table.table-bordered.vertical, 
 
.table.table-bordered.vertical td, 
 
.table.table-bordered.vertical th{ 
 
    border-top: 0px solid white !important; 
 
    border-bottom: 0px solid white !important; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 

 
</head> 
 
    
 
<body> 
 
<div class="container"> 
 
<table class="table table-bordered vertical"> 
 
    <thead> 
 
     <tr> 
 
      <th>Home</th> 
 
      <th>Client</th> 
 
      <th>Setting</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>data1</td> 
 
      <td>data2</td> 
 
      <td>data3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>data1</td> 
 
      <td>data2</td> 
 
      <td>data3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>data1</td> 
 
      <td>data2</td> 
 
      <td>data3</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
</div> 
 

 

 
</body> 
 
</html>

Это то, что вы ищете? вы добавляете границу явно, добавляя класс, ограниченный таблицей. Чтобы удалить вертикальные границы, мы добавляем вертикальный класс, который удаляет верхнюю и нижнюю границы из всех элементов th и td.

Примечание: Неправильная практика замены оригинального поведения. Поэтому я скорее расширяю его. Теперь table table-bordered vertical будет показывать вертикальные границы, а table table-bordered отобразит оригинальную версию.

Благодаря

источник

2015-04-22 11:02:50 Ronnie

Написать это:

table.table td, table.table th, table.table tr{ 
    border:none !important; 
}

источник

2015-04-22 11:48:15 locateganesh

Как удалить вертикальную границу таблицы в бутстрапе

ответ

Смежные вопросы