Tabel bootstrap tanpa garis / batas

Saya agak terjebak dengan masalah CSS saat menggunakan Bootstrap. Saya juga menggunakan JS Angular dengan Angular UI.bootstrap (yang mungkin menjadi bagian dari masalah).

Saya membuat situs web yang menampilkan data dalam sebuah tabel. Terkadang, data berisi objek yang harus saya tampilkan dalam tabel. Jadi saya ingin menempatkan tabel tanpa batas di dalam tabel normal sambil menjaga di dalam garis pemisah untuk tabel tanpa batas.

Tetapi tampaknya bahkan jika saya secara khusus mengatakan untuk tidak menunjukkan perbatasan di atas meja, terpaksa:

HTML:

<table class='table borderless'>

CSS:

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

Jadi di sini, yang saya inginkan hanyalah batas dalam.

Gaya tepi diatur pada tdelemen.

html:

<table class='table borderless'>

css:

.borderless td, .borderless th {
    border: none;
}

Pembaruan: Karena Bootstrap 4.1 dapat Anda gunakan .table-borderlessuntuk menghapus perbatasan.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

Menggunakan Bootstrap 3.2.0 Saya punya masalah dengan solusi Brett Henderson (perbatasan selalu ada), jadi saya memperbaikinya:

HTML

<table class="table table-borderless">

CSS

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

mirip dengan yang lain, tetapi lebih spesifik:

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

Jangan tambahkan .tablekelas ke <table>tag Anda . Dari dokumentasi Bootstrap di atas tabel :

Untuk gaya dasar — ​​padding ringan dan hanya pembagi horizontal — tambahkan kelas dasar .tableke semua <table>. Ini mungkin tampak sangat berlebihan, tetapi mengingat banyaknya penggunaan tabel untuk plugin lain seperti kalender dan pemilih tanggal, kami telah memilih untuk mengisolasi gaya tabel khusus kami.

Karena Bootstrap v4.1 Anda dapat menambahkan table-borderlesske tabel Anda, lihat dokumentasi resmi :

<table class='table table-borderless'>

Di CSS saya:

.borderless tr td {
    border: none !important;
    padding: 0px !important;
}

Dalam arahan saya:

<table class='table borderless'>
    <tr class='borderless' ....>

Saya tidak menempatkan 'tanpa batas' untuk elemen td.

Diuji dan berhasil! Semua batas dan bantalan sepenuhnya dilepas.

Saya memperluas gaya tabel Bootstrap seperti yang Davide Pastore lakukan, tetapi dengan metode itu gaya diterapkan ke semua tabel anak juga, dan mereka tidak berlaku untuk catatan kaki.

Solusi yang lebih baik akan meniru gaya tabel Bootstrap inti, tetapi dengan kelas baru Anda:

.table-borderless>thead>tr>th
.table-borderless>thead>tr>td
.table-borderless>tbody>tr>th
.table-borderless>tbody>tr>td
.table-borderless>tfoot>tr>th
.table-borderless>tfoot>tr>td {
    border: none;
}

Maka ketika Anda <table class='table table-borderless'>hanya menggunakan tabel spesifik dengan kelas akan dibatasi, bukan tabel di pohon.

Coba ini:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Catatan: Apa yang Anda lakukan sebelumnya tidak berfungsi karena kode css Anda menargetkan tabel di dalam tabel .borderless Anda (yang mungkin tidak ada)

Saya tahu ini adalah utas lama dan bahwa Anda telah mengambil jawaban, tetapi saya pikir saya akan memposting ini karena relevan untuk orang lain yang sedang mencari.

Tidak ada alasan untuk membuat aturan CSS baru, cukup batalkan aturan saat ini dan perbatasan akan hilang.

    .tabel> tbody> tr> th,
    .table> tbody> tr> td {
        border-top: 0;
    }

maju, apa pun yang ditata

    .meja

tidak akan menunjukkan batas.

Gunakan border-kelas dari Boostrap 4

<td class="border-0"></td>

atau

<table class='table border-0'></table>

Pastikan untuk mengakhiri input kelas dengan perubahan terakhir yang ingin Anda lakukan.

Yang ini berhasil untuk saya.

<td style="border-top: none;">;

Kuncinya adalah Anda perlu menambahkan border-top ke <td>

Aku terlambat untuk permainan di sini tapi FWIW: menambahkan .table-borderedke .tablehanya membungkus meja dengan perbatasan, meskipun dengan menambahkan perbatasan penuh untuk setiap sel.

Tetapi menghapus .table-borderedmasih meninggalkan garis aturan. Ini adalah masalah semantik, tetapi sesuai dengan nomenklatur BS3 +, saya telah menggunakan serangkaian penggantian ini:

.table.table-unruled>tbody>tr>td,
.table.table-unruled>tbody>tr>th {
  border-top: 0 none transparent;
  border-bottom: 0 none transparent;
}

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-5">
      .table
      <table class="table">
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered">
        .table .table-bordered
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-5">
      <table class="table table-unruled">
        .table .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="col-xs-5 col-xs-offset-1">
      <table class="table table-bordered table-unruled">
        .table .table-bordered .table-unruled
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tbody>
        <tfoot>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>

</div>

Gunakan hiddenalih-alih none:

.hide-bottom {
    border-bottom-style: hidden;
}

Sebagian besar contoh tampaknya terlalu spesifik dan / atau kembung.

Inilah solusi saya yang dipangkas menggunakan Bootstrap 4.0.0 (4.1 termasuk .table-borderlesstetapi masih alpha) ...

.table-borderless th{border:0;}
.table-borderless td{border:0;}

Mirip dengan banyak solusi yang diusulkan, tetapi byte minimal 😉

Catatan: Berakhir di sini karena saya melihat referensi BS4.1 dan tidak tahu mengapa .table-borderlesstidak bekerja dengan sumber-sumber 4.0 saya (misalnya: kesalahan operator, ya) 💩

Dalam beberapa kasus, seseorang juga harus menggunakan spasi-perbatasan di kelas tabel, seperti:

batas-jarak: 0! penting;

Instal bootstrap dengan tautan npm atau cdn

<table class="table table-borderless">
<thead>
<tr>
  <th scope="col">#</th>
  <th scope="col">First</th>
  <th scope="col">Last</th>
  <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>
<tr>
  <th scope="row">2</th>
  <td>Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
  </tr>
  <tr>
  <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
 </tbody>
</table>

dapatkan referensi dengan tautan ini