Đường viền không được viền đồng nhất trong ô bảng

Question

Tôi đã áp dụng CSS border-bottom:1px dashed #494949; trên một số ô liên tiếp của một hàng của một bảng HTML, nhưng đường viền không đồng nhất. Dấu gạch ngang ở cuối mỗi ô xuất hiện lâu hơn một chút. Đường viền chấm chấm cũng không đồng đều. Tôi cũng đang sử dụng border-collapse:collapse;

Dưới đây là ảnh chụp màn hình:

Có cách nào tôi có thể nhận thống nhất tiêu tan biên giới?

Answer 1

trình duyệt có oddities trong render biên giới tiêu tan. Bạn có thể chiến đấu chống lại chúng bằng cách loại bỏ khoảng cách ô và ô đệm và đặt đường viền trên phần tử tr chứ không phải trên các ô, ví dụ:

table { border-collapse: collapse; } 
td { padding: 0; } 
tr { border-bottom:1px dashed #494949; } 

Nhưng điều này vẫn có vẻ thất bại trên IE 9 (tại nút giao thoa) và trình duyệt cũ bỏ qua đường viền được đặt trên hàng trong bảng.

Thay vào đó, hãy cân nhắc sử dụng đường viền màu xám. Nó hoạt động liên tục và có thể được chấp nhận một cách trực quan, thậm chí có thể tốt hơn.

Answer 2

Khó nói chắc chắn những gì đang xảy ra mà không có ảnh chụp màn hình hoặc bản trình diễn, nhưng có vẻ như chúng có vẻ dài hơn khi chuyển sang ô tiếp theo vì dấu gạch ngang cuối cùng chạm vào dấu gạch ngang đầu tiên trong ô tiếp theo.

Trong trường hợp đó, hãy thử đặt đường viền trên toàn bộ hàng thay vì các ô riêng lẻ.

Answer 3

Tôi không chắc nhưng có vẻ như vấn đề hiển thị. Ngay cả khi sử dụng background-image thay vì border-bottom cũng sẽ có cùng một loại vấn đề.

Answer 4

Đặt cược tốt nhất của bạn trong trường hợp này là tạo tệp hình ảnh lặp lại, chiều cao trong đó là chiều cao của hàng trong bảng. Đặt nó làm nền bảng và đảm bảo nó lặp lại. Tôi đã thử nghiệm nó, và nó hoạt động. Lưu ý rằng trong tệp PNG được tạo cho ví dụ này, các dấu gạch ngang dài mỗi 3px và có ba pixel ở cuối bên phải, cho kích thước cuối cùng là 30px (chiều rộng) x 29px (chiều cao).

Dưới đây là các mã:

.borderTable { 
 
    background: url(http://www.windycitywebsites.com/wp-content/uploads/2012/03/dash_png.png); 
 
    background-repeat: repeat; 
 
} 
 

 
.borderTable td { 
 
    height: 29px; 
 
}

<table class="borderTable" width="350" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr class="stuff"> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr class="stuff"> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
</table>