Làm cách nào để đặt đường viền quanh thẻ tr?

Question

Tôi có một trang html rất đơn giản:

<table> 
    <tr><th>header1</th><th>header2</th></tr> 
    <tr><td>item1</td><td>item2</td></tr> 
    <tr><td>item3</td><td>item4</td></tr> 
</table> 

Với một số css đơn giản:

tr { 
    border:1px solid blue; 
} 

tôi sẽ mong đợi điều này để đặt một đường viền xung quanh tr s nhưng nó không đặt một biên giới xung quanh nó ở tất cả. Làm cách nào để tôi có được đường viền xung quanh tr?

Answer 1

Thêm table { border-collapse: collapse; }.

Từ the CSS2 specification:

Trong [mô hình border-collapse: separate], mỗi tế bào có một biên giới cá nhân. [...] Hàng, cột, nhóm hàng và nhóm cột không thể có đường viền (tức là, tác nhân người dùng phải bỏ qua thuộc tính đường viền cho các yếu tố đó).

Answer 2

Mã của bạn hoạt động, nếu bạn muốn border ngay trên hàng.

Tuy nhiên, nếu bạn đang tìm kiếm để có border ở khắp mọi nơi, bạn sẽ cần phải làm điều này:

tr, td, th{ 
    border:1px solid blue; 
} 

Ví dụ: http://jsfiddle.net/jasongennaro/83VjH/

Answer 3

Borders thể được thêm vào hàng của bảng bằng cách thêm biên giới để <td> và <th> yếu tố [Về cơ bản đây là thủ thuật CSS để đạt được (hack!) Vì không thể thêm đường viền vào <tr> và <tbody> các yếu tố của bảng]. Thêm các kiểu sau vào CSS của bạn để có đường viền xung quanh các hàng hoặc các tiêu đề hoặc các ô bảng.

table { 
    border-collapse: collapse; 
} 
table td, table th { 
    border: solid white; 
} 
td { 
    border-color: red (just an example, can be as per your requirement); 
} 

Giải thích:

1. quy tắc border-collapse được thêm vào toàn bộ bảng. Nó có thể có hai thuộc tính có thể tách biệt (mặc định) và kế thừa. Để biết các hiệu ứng tương ứng, hãy tham khảo https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
2. Quy tắc thứ hai tức là thêm thuộc tính biên giới là <td> (cho ô dữ liệu) và <th> (cho ô tiêu đề) là phải. Nếu bạn không thêm, đường viền sẽ không hiển thị. Trong quy tắc này, màu đường viền là màu trắng, nó có thể là một số màu khác mà bạn chọn thay vì màu trắng. Về cơ bản, quy tắc này sẽ kích hoạt các đường viền xung quanh các ô của bảng và vì màu trắng không có gì sẽ hiển thị.
3. Và cuối cùng, thêm màu sắc bạn chọn. Quy tắc này có thể cụ thể hơn để áp dụng đường viền cho một số <td> hoặc một lớp là <td>.