Bảng Bootstrap không có sọc / viền

Tôi bị mắc kẹt với một vấn đề CSS trong khi sử dụng Bootstrap. Tôi cũng đang sử dụng Angular JS với Angular UI.bootstrap (có thể là một phần của vấn đề).

Tôi đang tạo một trang web hiển thị dữ liệu trong một bảng. Đôi khi, dữ liệu chứa đối tượng mà tôi phải hiển thị trong bảng. Vì vậy, tôi muốn đặt các bảng không biên giới trong một bảng bình thường trong khi giữ các đường phân cách cho các bảng không biên giới.

Nhưng dường như ngay cả khi tôi đặc biệt nói không hiển thị đường viền trên bàn, nó vẫn bị ép buộc:

HTML:

<table class='table borderless'>

CSS:

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

Vì vậy, ở đây, những gì tôi muốn chỉ là biên giới bên trong.

Kiểu dáng đường viền được đặt trên các tdyếu tố.

html:

<table class='table borderless'>

css:

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

Cập nhật: Kể từ Bootstrap 4.1, bạn có thể sử dụng .table-borderlessđể xóa đường viền.

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

Sử dụng Bootstrap 3.2.0 Tôi gặp vấn đề với giải pháp Brett Henderson (đường viền luôn ở đó), vì vậy tôi đã cải thiện nó:

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

tương tự như phần còn lại, nhưng cụ thể hơn:

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

Đừng thêm .tablelớp vào <table>thẻ của bạn . Từ các tài liệu Bootstrap trên các bảng :

Đối với đệm phong cách ánh sáng cơ bản và chỉ chia ngang -Thêm các lớp cơ sở .tablecho bất kỳ <table>. Nó có vẻ rất dư thừa, nhưng do việc sử dụng rộng rãi các bảng cho các plugin khác như lịch và bộ chọn ngày, chúng tôi đã chọn cách ly các kiểu bảng tùy chỉnh của mình.

Vì Bootstrap v4.1, bạn có thể thêm table-borderlessvào bảng của mình, xem tài liệu chính thức :

<table class='table table-borderless'>

Trong CSS của tôi:

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

Trong chỉ thị của tôi:

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

Tôi đã không đặt 'không biên giới' cho phần tử td.

Đã thử nghiệm và nó đã làm việc! Tất cả các đường viền và miếng đệm được loại bỏ hoàn toàn.

Tôi đã mở rộng các kiểu bảng Bootstrap như Davide Pastore đã làm, nhưng với phương thức đó, các kiểu này cũng được áp dụng cho tất cả các bảng con và chúng không áp dụng cho chân trang.

Một giải pháp tốt hơn sẽ là bắt chước các kiểu bảng Bootstrap cốt lõi, nhưng với lớp mới của bạn:

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

Sau đó, khi bạn <table class='table table-borderless'>chỉ sử dụng bảng cụ thể với lớp sẽ được viền, không phải bất kỳ bảng nào trong cây.

Thử cái này:

<table class='borderless'>

CSS

.borderless {
 border:none;
}

Lưu ý: Những gì bạn đang làm trước đây không hoạt động vì mã css của bạn đang nhắm mục tiêu một bảng trong bảng .borderless của bạn (có thể không tồn tại)

Tôi biết đây là một chủ đề cũ và bạn đã chọn một câu trả lời, nhưng tôi nghĩ tôi đã đăng bài này vì nó phù hợp với bất kỳ ai khác đang tìm kiếm.

Không có lý do để tạo quy tắc CSS mới, chỉ cần hoàn tác các quy tắc hiện tại và các đường viền sẽ biến mất.

    .table> tbody> tr> th,
    .table> tbody> tr> td {
        đỉnh biên: 0;
    }

tiến về phía trước, bất cứ điều gì theo kiểu

    .bàn

sẽ không có biên giới

Sử dụng border-lớp từ Boostrap 4

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

hoặc là

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

Hãy chắc chắn kết thúc đầu vào lớp với thay đổi cuối cùng bạn muốn làm.

Cái này làm việc cho tôi

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

Điều quan trọng là bạn cần thêm đường viền vào <td>

Tôi đến trễ trò chơi ở đây nhưng FWIW: thêm .table-borderedvào một .tablebảng chỉ bọc một đường viền, mặc dù bằng cách thêm một đường viền đầy đủ vào mỗi ô.

Nhưng loại bỏ .table-borderedvẫn để lại các dòng quy tắc. Đây là một vấn đề ngữ nghĩa, nhưng phù hợp với danh pháp BS3 + tôi đã sử dụng bộ ghi đè này:

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

Sử dụng hiddenthay vì none:

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

Hầu hết các ví dụ dường như quá cụ thể và / hoặc cồng kềnh.

Đây là giải pháp rút gọn của tôi bằng cách sử dụng Bootstrap 4.0.0 (4.1 bao gồm .table-borderlessnhưng vẫn là alpha) ...

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

Tương tự như nhiều giải pháp được đề xuất, nhưng byte tối thiểu

Lưu ý: Đã kết thúc tại đây vì tôi đang xem các tài liệu tham khảo BS4.1 và không thể hiểu tại sao .table-borderlessnó không hoạt động với các nguồn 4.0 của tôi (ví dụ: lỗi vận hành, duh)

Trong một số trường hợp, người ta cũng phải sử dụng khoảng cách viền trong lớp bảng, như:

khoảng cách biên: 0! quan trọng;

Cài đặt bootstrap với liên kết npm hoặc 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>

có được tài liệu tham khảo với liên kết này