Thuộc tính empty-cells

Thuộc tính empty-cells chỉ định cho trình duyệt cách hiển thị nền và đường viền của các ô td hoặc ô th trống trong bảng HTML: hiển thị hay không.

Một ô được coi là trống trong các trường hợp sau: không có bất kỳ ký tự nào, trong ô chỉ chứa dấu cách (một hoặc nhiều), ký tự xuống dòng hoặc tab, hoặc nếu thuộc tính visibility được đặt là hidden.

Để làm cho một ô không trống, nhưng đồng thời không có văn bản hiển thị, người ta sử dụng mẹo sau: đặt một khoảng trống không ngắt   vào ô.

Thuộc tính không hoạt động nếu border-collapse được đặt với giá trị collapse.

Cú pháp

cssbộ chọn {
  empty-cells: show | hide;
}

Giá trị

Giá trị mặc định: show.

Ví dụ . Giá trị show

Hiện tại trong bảng có một số ô trống, nhưng chúng vẫn có đường viền và nền:

html<table>
  <tr>
    <td>ô</td>
    <td></td>
    <td>ô</td>
  </tr>
  <tr>
    <td></td>
    <td>ô</td>
    <td></td>
  </tr>
  <tr>
    <td>ô</td>
    <td>ô</td>
    <td>ô</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: show;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Ví dụ . Giá trị hide

Còn bây giờ các ô trống sẽ không có nền và đường viền:

html<table>
  <tr>
    <td>ô</td>
    <td></td>
    <td>ô</td>
  </tr>
  <tr>
    <td></td>
    <td>ô</td>
    <td></td>
  </tr>
  <tr>
    <td>ô</td>
    <td>ô</td>
    <td>ô</td>
  </tr>
</table>

csstable {
  width: 400px;
  empty-cells: hide;
}
td {
  border: 1px solid black;
  background-color: #f3f3f3;
  text-align: center;
}

Результат:

Xem thêm