คุณสมบัติ border-collapse

คุณสมบัติ border-collapse ทำให้ เส้นขอบคู่ระหว่างเซลล์ td หรือเซลล์ th ของ ตาราง HTML (และระหว่างเส้นขอบของเซลล์กับตัวตารางเอง) ยุบรวมเข้าด้วยกันและดูเหมือนเป็นเส้นเดียว

คุณสมบัตินี้ใช้ได้เฉพาะกับตาราง และองค์ประกอบที่มี display ตั้งค่าเป็น table หรือ inline-table เท่านั้น สำหรับองค์ประกอบ บล็อกธรรมดา น่าเสียดายที่มัน จะไม่ทำงาน โปรดทราบว่าควรนำไปใช้ กับตัวตาราง ไม่ใช่กับเซลล์ของมัน

ไวยากรณ์

cssตัวเลือก {
  border-collapse: collapse | separate;
}

ค่า

ค่าเริ่มต้น: separate

ตัวอย่าง . ค่า separate

ขณะนี้ในตารางเส้นขอบทั้งหมดเป็นเส้นคู่ (กำหนดเส้นขอบ ให้ทั้งเซลล์และตัวตารางเอง):

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;
}

Результат:

ตัวอย่าง . ค่า separate

และตอนนี้กำหนดเส้นขอบให้เซลล์ แต่ไม่ได้กำหนดให้ ตัวตารางเอง ในตำแหน่งที่สองเซลล์มี เส้นขอบร่วมกัน - เส้นขอบจะเป็นเส้นคู่ ใน ตำแหน่งอื่น ๆ - เป็นเส้นเดี่ยว:

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;
}

Результат:

ตัวอย่าง . ค่า collapse

ขณะนี้ในตารางเส้นขอบทั้งหมดจะยุบรวมและ ดูมีความหนา 1px ตามที่ ต้องการ:

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;
}

Результат: