Thuộc tính border-collapse

Thuộc tính border-collapse khiến các đường viền đôi giữa các ô td hoặc các ô th của bảng HTML (và giữa đường viền của ô với bảng chính) được thu gọn và trông như một đường duy nhất.

Thuộc tính này chỉ áp dụng cho bảng và cho các phần tử có display với giá trị table hoặc inline-table. Đối với các phần tử khối thông thường, thật không may, nó sẽ không hoạt động. Lưu ý rằng nên áp dụng cho bảng, chứ không phải cho các ô của nó.

Cú pháp

cssbộ chọn {
  border-collapse: collapse | separate;
}

Giá trị

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

Ví dụ . Giá trị separate

Hiện tại trong bảng, tất cả đường viền đều là đôi (đường viền được đặt cho cả các ô và cho chính bảng):

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Ví dụ . Giá trị separate

Và bây giờ đường viền được đặt cho các ô, nhưng bảng chính thì không. Ở những nơi hai ô có chung đường viền, - đường viền sẽ là đôi, ở những nơi khác - là đơn:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

Ví dụ . Giá trị collapse

Bây giờ trong bảng, tất cả đường viền sẽ được thu gọn và trông có độ dày là 1px, như chúng ta mong muốn:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: