Đặt đường viền trong bảng trong HTML

Question

Làm cách nào để đặt "đường viền trong" - đường viền giữa các ô khác nhau.

Bằng cách đặt thuộc tính kiểu tôi quản lý để kiểm soát đường viền ngoài, nhưng đường viền bên trong chỉ giữ cùng màu xám và có cùng chiều rộng. Tôi nên tinh chỉnh thuộc tính nào để kiểm soát đường viền bên trong?

Answer 1

Bạn cần tạo kiểu cho phần tử <td>.

Hãy nhìn vào các W3C website

Answer 2

Đối với đánh dấu bảng bình thường, đây là một giải pháp ngắn hoạt động trên tất cả các thiết bị/các trình duyệt trên BrowserStack, ngoại trừ IE 7 và dưới đây:

table { border-collapse: collapse; } 

td + td, 
th + th { border-left: 1px solid; } 
tr + tr { border-top: 1px solid; } 

Đối với 7 hỗ trợ IE , thêm này:

tr + tr > td, 
tr + tr > th { border-top: 1px solid; } 

Một trường hợp thử nghiệm có thể được nhìn thấy ở đây: http://codepen.io/dalgard/pen/wmcdE