คุณสมบัติ CSS border-collapse property ใช้ระบุว่าองค์ประกอบ <table> มีขอบร่วมกัน (shared) หรือแยกกัน (separate borders) สามารถรับค่าได้สองค่า: separate และ collapse
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS border-collapse property มีดังนี้:
Selector { border-collapse: /*value*/ }
ตัวอย่างต่อไปนี้แสดงให้เห็นถึง CSS border-collapse:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> #cdemo { border-collapse: collapse; } #sdemo { border-collapse: separate; } table { display: inline-table; margin: 30px; } th,td { border: 3px ridge orange; } td { border-color: red; } caption { box-shadow: 0px -5px 4px 3px green; } </style> </head> <body> <h2>Employee Records</h2> <table id="sdemo"> <caption> Employee Details (Separate Border) </caption> <tr> <th>Employee</th> <th>Department</th> </tr> <tr> <td>Tim</td> <td>Operations</td> </tr> <tr> <td>Nathan</td> <td>Finance</td> </tr> <tr> <td>John </td> <td>Marketing</td> </tr> </table> <table id="cdemo"> <caption> Employee Details (Collapse Border) </caption> <tr> <th>Employee</th> <th>Department</th> </tr> <tr> <td>Tim</td> <td>Operations</td> </tr> <tr> <td>Nathan</td> <td>Finance</td> </tr> <tr> <td>John </td> <td>Marketing</td> </tr> </table> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; empty-cells: hide; display: inline-table; margin: 30px; } table+table { border-collapse: collapse; empty-cells: hide; } td { border: 3px ridge lightblue; } caption { box-shadow: 0px -5px 4px 3px grey; } </style> </head> <body> <h2>Demo Tables</h2> <table> <caption>Demo caption</caption> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> <table> <caption>Demo caption</caption> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
