Kiểu bảng CSS

Bảng đệm

Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng, hãy sử dụng thuộc paddingtính trên các phần tử <td> và <th>:

th, td {
padding: 15px;
text-align: left;
}

Thêm thuộc border-bottomtính vào <th> và <td> cho các dải phân cách ngang:

th, td {
border-bottom: 1px solid #ddd;
}

Sử dụng :hoverbộ chọn trên <tr> để đánh dấu các hàng trong bảng khi di chuột qua:

tr:hover {background-color: yellow;}

Đối với bảng sọc vằn, hãy sử dụng nth-child()bộ chọn và thêm a background-colorvào tất cả các hàng bảng chẵn (hoặc lẻ):

tr:nth-child(even) {background-color: #f2f2f2;}

Ví dụ dưới đây chỉ định màu nền và màu văn bản của các phần tử <th>:

th {
background-color: #04AA6D;
color: white;
}