web-dev-qa-db-fra.com

Bootstrap table. Comment supprimer toutes les bordures de la table?

Comment supprimer toutes les bordures (en particulier les bordures extérieures) de table d'amorçage ? Voici un tableau sans bordures intérieures:

[~ # ~] 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/

Quels styles CSS doivent être remplacés pour supprimer toutes les bordures?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-table
14
ytterrr

Dans ce cas, vous devez définir la bordure sous le tablea et les bordures autour de la tête de table r, données de la table, table container all to 0px afin de se débarrasser totalement de toutes les bordures.

.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>
22
Ashesh Kumar Singh

vous pouvez définir l'option classes sur table sans bordure, par exemple: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html .

Edit: cette fonctionnalité n'est prise en charge que dans la version de développement (après la v1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src .

4
wenyi

Essaye ça:

.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;
}

Démo JSFiddle

3
Ferrrmolina

Modifiez la taille border dans le CSS pour le .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/

2
user2314737

html

<table class="table noborder">

css

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

Utilisation de Bootstrap In html

<table class="table no-border">

En CSS

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

Source: https://codepen.io/netsi1964/pen/ogVQqG

2
pabloferraz

Si vous utilisez bootstrap cela vous aidera:

<table class="table table-borderless">
1
sameera karunanayake

pour supprimer la bordure extérieure, vous devez supprimer la bordure de .fixed-table-container comme suit :

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

C'est simple, veuillez ajouter le code ci-dessous dans votre feuille CSS.Il supprimera toutes les bordures du tableau

.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;
}

L'espoir a aidé.

0
loyola

Si vous utilisez CSS3, cela vous aidera à:

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

Vous devez définir border: none !important; à .fixed-table-container et .table. Définissez également border-bottom: none !important; à votre première règle, .table th, .table td.
Fiddle mis à jour: http://jsfiddle.net/sba7wkvb/5/

0
Rafael Almeida