Çizgisiz / kenarlıksız bootstrap masası

Bootstrap kullanırken biraz CSS sorunu ile sıkışmış. Ayrıca Angular UI.bootstrap (sorunun bir parçası olabilir) ile Angular JS kullanıyorum.

Tabloda veri görüntüleyen bir web sitesi yapıyorum. Bazen, veriler tablolarda göstermem gereken nesne içeriyor. Bu yüzden kenarlıksız tablolar için ayırma çizgileri içinde tutarken normal bir tabloya kenarlıksız tablolar koymak istiyorum.

Ama öyle görünüyor ki, özellikle bir tablodaki sınırları göstermemeyi söylesem bile, zorlanır:

HTML:

<table class='table borderless'>

CSS:

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

Yani burada istediğim sadece iç sınırlar.

Kenarlık stili tdöğeler üzerinde ayarlanır .

html:

<table class='table borderless'>

css:

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

Güncelleme: Bootstrap 4.1'den beri .table-borderlesskenarlığı kaldırmak için kullanabilirsiniz .

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

Bootstrap 3.2.0 kullanarak Brett Henderson çözümü ile ilgili sorunlar yaşadım (sınırlar her zaman oradaydı), bu yüzden geliştirdim:

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

diğerlerine benzer, ancak daha spesifik:

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

.tableSınıfı <table>etiketinize eklemeyin . Tablolardaki Bootstrap belgelerinden :

Temel stil için — hafif dolgu ve yalnızca yatay bölücüler — temel sınıfı .tableherhangi birine ekleyin <table>. Çok gereksiz görünebilir, ancak takvimler ve tarih seçiciler gibi diğer eklentiler için tabloların yaygın kullanımı göz önüne alındığında, özel tablo stillerimizi izole etmeyi seçtik.

Bootstrap v4.1'den table-borderlessmasanıza ekleyebileceğinizden , resmi belgelere bakın :

<table class='table table-borderless'>

CSS'mde:

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

Yönergemde:

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

TD elemanı için 'kenarlıksız' koymadım.

Test edildi ve işe yaradı! Tüm kenarlıklar ve dolgular tamamen çıkarılmıştır.

Davide Pastore'nun yaptığı gibi Bootstrap tablo stillerini genişlettim, ancak bu yöntemle stiller tüm alt tablolara da uygulanır ve altbilgiye uygulanmaz.

Daha iyi bir çözüm, temel Bootstrap tablo stillerini taklit etmek olabilir, ancak yeni sınıfınızla:

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

Sonra <table class='table table-borderless'>sadece sınıf ile belirli bir tablo kullandığınızda , ağaçtaki herhangi bir tablo sınırlandırılacaktır.

Bunu dene:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Not: Css kodunuz .borderless tablonuzdaki bir tabloyu hedeflediğinden (muhtemelen mevcut değildi) daha önce yaptığınız şey çalışmadı

Bu eski bir iş parçacığı olduğunu biliyorum ve bir cevap seçtiniz, ama ben şu anda arayan herkes için alakalı olarak bu yazı olacağını düşündüm.

Yeni CSS kuralları oluşturmak için bir neden yoktur, sadece mevcut kuralları geri alın ve sınırlar kaybolacaktır.

    .table> tbody> tr> th,
    .table> tbody> tr> td {
        sınır üstü: 0;
    }

ileriye dönük, her şey tarz

    .table

sınır göstermez.

Kullanım border-Boostrap sınıfından 4

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

veya

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

Sınıf girişini, yapmak istediğiniz son değişiklikle bitirdiğinizden emin olun.

Bu benim için çalıştı.

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

Anahtar şudur: <td>

Burada oyuna geç kaldım ama FWIW: ekleyerek .table-borderedbir karşı .tablekendini her hücrede tam sınır ekleyerek olsa bir kenarlıklı tablo sarar.

Ancak kaldırmak .table-borderedyine de kural çizgilerini bırakır. Bu bir anlamsal sorun, ancak BS3 + terminolojisine uygun olarak bu geçersiz kılma kümesini kullandım:

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

Şunun hiddenyerine kullanın none:

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

Çoğu örnek çok spesifik ve / veya şişmiş görünmektedir.

İşte Bootstrap 4.0.0 (4.1 .table-borderlesshala alfa dahil) kullanarak kesilmiş çözümüm ...

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

Önerilen birçok çözüme benzer, ancak minimum bayt 😉

Not: BS4.1 referanslarını görüntülediğim ve neden .table-borderless4.0 kaynaklarıyla çalışmadığımı anlayamadığım için burada sona erdi (örn: operatör hatası, duh) 💩

Bazı durumlarda, tablo sınıfında kenar boşluğu da kullanılmalıdır, örneğin:

kenarlık aralığı: 0! önemli;

Npm veya cdn bağlantısıyla bootstrap yükleyin

<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>

bu bağlantıyla referans al