Không thể có được lớp .table sọc để làm việc

Question

Tôi không thể có được lớp bảng sọc của tôi để làm việc với khung Bootstrap của tôi.

Đây là bản xem trước trực tiếp của bảng của tôi. Tôi có lớp .table sọc được đặt trong HTML của tôi, nhưng nó không hiển thị trên đầu ra.

Tôi đang làm gì sai?

Answer 1

html của bạn sai. Bạn có một thẻ tbody cho mỗi hàng nhưng css cho .table-striped dựa vào tr:nth-child() để tạo kiểu các hàng khác nhau:

.table-striped tbody > tr:nth-child(odd) > td, 
.table-striped tbody > tr:nth-child(odd) > th 

Fix html của bạn để bạn có một tbody duy nhất để lặp qua.

Ngoài ra, tôi đã thấy cả bootstrap.css và bootstrap.min.css trong tài nguyên của bạn. Một là đủ.

Answer 2

Vấn đề là với đánh dấu bảng của bạn. Bạn có mỗi hàng bao bọc trong một thẻ tbody và theo tài liệu hướng dẫn bootstrap:

Thêm zebra-striping vào bất kỳ hàng nào trong bảng thông qua bộ chọn CSS thứ n: (không có trong IE7-8).

Vì vậy, nếu bạn đi qua và loại bỏ tất cả các thẻ tbody để có chỉ là một vào đầu cơ bảng của bạn và một ở cuối, nó sẽ hoạt động như mong đợi.

Answer 3

Chỉ cần một thông tin bổ sung, ng-repeat nên trên:

<tr> inside <tbody>: 

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th class="col-md-1"></th> 
      <th class="col-md-5"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="v1 in v"> 
      <td><span class="glyphicon glyphicon-trash"/></td> 
      <td>{{v1.name}}</td> 
     </tr> 
    </tbody> 
</table>