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

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

ไวยากรณ์

cssselector {
  border-spacing: หนึ่งหรือสองค่า;
}

ค่า

ค่าเริ่มต้น: 0 อย่างไรก็ตาม เบราว์เซอร์แต่ละตัวมีค่าของแอตทริบิวต์ cellspacing ของตัวเองซึ่งไม่ใช่ศูนย์ ดังนั้นโดยค่าปกติคุณจะเห็นระยะห่างระหว่าง เซลล์

หมายเหตุ

ใช้คุณสมบัตินี้กับตาราง ไม่ใช่กับ เซลล์ของมัน (จะไม่ทำงานกับเซลล์)

ไม่สามารถได้ผลลัพธ์แบบเดียวกันโดยใช้ margin เนื่องจาก margin ไม่ ทำงานสำหรับเซลล์ตาราง

หากกำหนดคุณสมบัติ border-collapse เป็นค่า collapse - border-spacing จะไม่ทำงาน

ตัวอย่าง . หนึ่งค่า

มาทำให้ระยะห่างระหว่างเซลล์ (และ ระหว่างเซลล์กับขอบตาราง) เป็น 10px กัน:

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-spacing: 10px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

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

และตอนนี้กำหนดระยะห่างเป็น 10px ใน แนวนอน และ 30px ในแนวตั้ง:

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-spacing: 10px 30px;
  border-collapse: separate;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

ตัวอย่าง . กำหนด border-collapse: collapse

แต่ตอนนี้ border-spacing จะ ไม่ทำงานเนื่องจากคุณสมบัติ border-collapse มีค่าเป็น collapse:

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;
  border-spacing: 10px 30px;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: