Điều này có vẻ tầm thường, nhưng tôi dường như không thể vấp ngã khi câu trả lời.Đường viền hàng trong bảng HTML5 không có khoảng trống
Tôi muốn có các dòng tách hàng của tôi trong bảng HTML và không có gì khác. Đủ đơn giản, phải không?
Một số Googling đưa tôi đến thuộc tính bảng rules, nhưng rõ ràng là this isn't supported in HTML5.
Vì vậy, tôi đã tìm kiếm sâu hơn về CSS và nhận ra rằng tôi có thể đặt đường viền xung quanh tr 's, phải không? Không, không chỉ vậy, nó không hoạt động mà là many SO threads | assured me its a bad idea.
Về mặt logic, tôi đã chơi với các giải pháp của chúng, liên quan đến các kết hợp khác nhau của tr { border-bottom ..., nhưng tôi luôn kết thúc với khoảng cách nhỏ, đáng ghét này. Khoảng cách nào? Có khoảng một hoặc hai khoảng trống giữa hai số td (trong đó một cột tách dòng sẽ là). Điều này có vẻ không phải là một vấn đề lớn, nhưng có vẻ như không cần thiết và tôi không thể ngừng để ý đến nó. Tuy nhiên, vì lý do gì đó, nó không xuất hiện trong jsfiddle, vì vậy tôi khuyên bạn nên thử nó trong notepad và mở nó trong trình duyệt.
Tôi có mắc sai lầm ngớ ngẩn không? Nó là một lỗi đánh máy? Chỉ là máy tính của tôi? Bất kỳ sự giúp đỡ nào sẽ được đánh giá cao ... Tôi đã nhìn chằm chằm vào điều này quá lâu.
Đây là tệp thử nghiệm mà tôi đã chủ yếu thử nghiệm trong Chrome và Android. Nó thực sự cần phải làm việc trong cả hai, vì điều này cũng sẽ chạy trong một ứng dụng Phonegap mà ám HTML5 trong trình duyệt điện thoại.
<html>
<head>
<style>
td, th {
border-bottom: 1px solid black !important;
}
</style>
</head>
<body>
<table>
<tr>
<th>Item</th>
<th>Aisle</th>
</tr>
<tr>
<td>Cookies</td>
<td>2</td>
</tr>
<tr>
<td>Crackers</td>
<td>6</td>
</tr>
<tr>
<td>Milk</td>
<td>8</td>
</tr>
<tr>
<td>Cereal</td>
<td>2</td>
</tr>
</table>
</body>
</html>
'khoảng cách đường viền' đã làm. Oh CSS ... Cảm ơn bạn! –
Chỉ để làm nổi bật cho hậu thế vì ban đầu nó không làm việc cho tôi. Lưu ý rằng các thuộc tính này được áp dụng cho phần tử 'table', thay vì phần tử' td'! – ElFik