Một lựa chọn tốt hơn so với để hiển thị các ô bảng HTML trống?

Question

Đây là vấn đề kinh điển - khi bạn có một ô bảng trống, trình duyệt không hiển thị đường viền xung quanh nó. Ngoài ra còn có hai cách giải quyết nổi tiếng. Một là đặt một   trong ô bảng; khác là sử dụng thuộc tính CSS empty-cells:show.

Thật không may cả hai đều có nhược điểm.   là loại xấu xí khi nói đến việc chọn văn bản và sao chép-dán nó. Bạn nhận được rất nhiều không gian nơi không nên có bất kỳ, có lẽ ngay cả với một ký tự Unicode kỳ lạ. empty-cells:show nên giải quyết chính xác vấn đề này, nhưng tiếc là nó chỉ hoạt động đúng trong IE bắt đầu với phiên bản 8 (và sau đó chỉ trong chế độ tuân thủ tiêu chuẩn). Nó có thể được thực hiện để làm việc trong các phiên bản khác bằng cách chỉ định border-collapse: collapse, nhưng đôi khi đây là điều KHÔNG mong muốn. Trong trường hợp của tôi, tôi có một bảng khá phức tạp và nó dựa trên border-collapse:separate và nếu không sẽ tạo ra một súp CSS/HTML lộn xộn.

Vì vậy, những thứ khác mà bạn có thể đặt trong ô bảng sẽ làm cho IE vẽ đường viền nhưng không được hiển thị hoặc có thể sao chép được? Đối với tất cả các trình duyệt khác, empty-cells:show đã thực hiện thủ thuật, vì vậy tôi thực sự chỉ cần đánh lừa IE.

Answer 1

Bạn cũng có thể đặt vô hình yếu tố BR:

<td><br style="visibility:hidden"></td> 

Đó là số tiền vô lý của mã không cần thiết, nhưng nó làm cho các trick - không có văn bản bổ sung nào tế bào sẽ được hiển thị.

Lưu ý rằng <br/> là cú pháp HTML không hợp lệ theo thông số kỹ thuật chính thức http://www.w3.org/TR/html401/struct/text.html#edef-BR. Đó là cú pháp XHTML hợp lệ.

Answer 2

Bạn có thể hiển thị các ô có mã CSS này. Tôi đã thử nghiệm thành công nó trong Safari và Firefox. Tôi đoán nó hoạt động trong các trình duyệt khác.

table { 
 
    width: 100%; 
 
    border: 0; 
 
    empty-cells: show; 
 
} 
 
td { 
 
    border: 1px solid grey; 
 
} 
 
td:empty:after { 
 
    content: '.'; 
 
    color: transparent; 
 
    visibility: hidden; 
 
} 
 
/* alternate background */ 
 

 
tr:nth-child(odd) td { 
 
    background: rgba(0, 0, 0, 0.2); 
 
} 
 
tr:nth-child(even) td { 
 
    background: rgba(0, 0, 0, 0.1); 
 
}

<table> 
 
    <tr> 
 
    <td>Row</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table>