Загрузочный стол. Как удалить все границы из таблицы?

Как удалить все (особенно внешние) границы из загрузочную таблицу? Вот таблица без внутренних границ:

HTML

<style>
    .table th, .table td { 
        border-top: none !important;
        border-left: none !important;
    }
</style>
<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <br/>
        <table data-toggle="table" data-striped="true">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td>F</td>
            </tr>
            </tbody>
        </table>
    </div>    
    <div class="col-xs-1"></div>
</row>

http://jsfiddle.net/sba7wkvb/1/

Какие стили CSS необходимо переопределить для удаления всех границ?

Ответы

Ответ 1

В этом случае вам нужно установить границу под таблицей и границы вокруг - таблица heade r, данные таблицы, контейнер таблицы все до 0px для того, чтобы полностью избавиться от всех границ.

.table {
    border-bottom:0px !important;
}
.table th, .table td {
    border: 1px !important;
}
.fixed-table-container {
    border:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>

<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <br/>
        <table data-toggle="table" data-striped="true">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>E</td>
                <td>F</td>
            </tr>
            </tbody>
        </table>
    </div>    
    <div class="col-xs-1"></div>

Ответ 3

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

.table th, .table td {
    border-top: none !important;
    border-left: none !important;
}
.fixed-table-container {
    border:0px;
}
.table th {
    border-bottom: none !important;
}
.table:last-child{
  border:none !important;
}

Демо JSFiddle

Ответ 4

Измените размер border в CSS для .fixed-table-container

CSS

.table th, .table td {
    border-top: none !important;
    border-left: none !important;
}
.fixed-table-container {
    border:0px;
}

http://jsfiddle.net/sba7wkvb/3/

Ответ 5

HTML

<table class="table noborder">

CSS

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

Ответ 6

для удаления внешней границы вы должны удалить границу с .fixed-table-container следующим образом:

.fixed-table-container{border: 0px;}

Ответ 7

Вам нужно установить border: none !important; в .fixed-table-container и .table. Также установите border-bottom: none !important; в свое первое правило, .table th, .table td.
Обновленный скрипт: http://jsfiddle.net/sba7wkvb/5/

Ответ 8

Это просто, пожалуйста, добавьте приведенный ниже код в лист CSS. Он удалит все границы в таблице

.table th, .table td, .table {
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
}
.fixed-table-container {
    border:0px;
    border-bottom: none !important;
}

Надежды помогли.

Ответ 9

Если вы используете CSS3, это поможет вам:

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

Ответ 10

Использование Bootstrap В html

<table class="table no-border">

В css

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

Источник: https://codepen.io/netsi1964/pen/ogVQqG