Xóa dòng hàng trong twitter bootstrap

Question

Tôi đang sử dụng twitter bootstrap cho một số ứng dụng web mà tôi buộc phải làm (tôi không phải là nhà phát triển web) và tôi không thể tìm cách tắt hàng dòng cho bảng.

Như bạn có thể thấy từ Bootstrap documentation, kiểu bảng mặc định có chứa các hàng dòng.

Kính trọng,

Answer 1

Thêm phần này vào CSS chính của bạn:

table td { 
    border-top: none !important; 
} 

Sử dụng này cho các phiên bản mới hơn của bootstrap:

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

Answer 2

Trong Bootstrap 3 Tôi đã thêm một bảng-no -border class

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

Answer 3

bootstrap .min.css cụ thể hơn bản định kiểu của riêng bạn nếu bạn chỉ sử dụng .table td. Vì vậy, hãy sử dụng tùy chọn này thay thế:

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

Answer 4

Cách khác, nếu bạn gặp sự cố, việc thêm các dòng vào bảng điều khiển của bạn không quên thêm vào BẢNG. Theo mặc định (http://getbootstrap.com/components/#panels), đó là giả sử để thêm dòng nhưng Nó đã giúp tôi thêm thẻ để bây giờ các dòng hàng được hiển thị.

Ví dụ sau "có lẽ" sẽ không hiển thị ranh giới giữa hàng:

<div class="panel panel-default"> 
    <!-- Default panel contents --> 
    <div class="panel-heading">Panel heading</div> 
    <!-- Table --> 
    <table class="table"> 
     <tr><td> Hi 1! </td></tr> 
     <tr><td> Hi 2! </td></tr> 
    </table> 
</div> 

Ví dụ sau sẽ hiển thị ranh giới giữa hàng:

<div class="panel panel-default"> 
    <!-- Default panel contents --> 
    <div class="panel-heading">Panel heading</div> 
    <!-- Table --> 
    <table class="table"> 
     <thead></thead> 
     <tr><td> Hi 1! </td></tr> 
     <tr><td> Hi 2! </td></tr> 
    </table> 
</div> 

Answer 5

Đây là những gì làm việc cho tôi ..

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td, 
.table-no-border>tbody, 
.table-no-border>thead, 
.table-no-border>tfoot{ 
    border-top: none !important; 
    border-bottom: none !important; 
} 

Phải đánh dấu điều quan trọng để làm cho nó dính.

Answer 6

Có cùng một câu hỏi từ một người bạn. Đề xuất của tôi mà không yêu cầu !Important trông như thế này: Tôi thêm một lớp tùy chỉnh "no-border" có thể được thêm vào bảng khởi động.

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

Bạn có thể nhìn thấy đường đi của tôi tại một solution here