border-collapse Property
ویژگی border-collapse
در CSS تعیین می کند که آیا سلول های داخل جدول حاشیه (border) های مشترکی استفاده کنند یا نه.
نحوه نوشتار
border-collapse: collapse; border-collapse: separate;
ویژگی border-collapse
تنها توسط کلیدواژه مشخص می شود که یکی از دو مقدار زیر است:
مقادیر
collapse
این مقدار مشخص می کند که سلول های جدول، حاشیه های (border) مشترک داشته باشند.
separate
این مقدار مشخص می کند که سلول های جدول، حاشیه های (border) جداگانه داشته باشند.
در مثال زیر عملکرد این ویژگی را میبینیم. دو جدول با سلولهایی که حاشیه های مشترک و جدا از هم دارند:
html
<div class="wrapper"> <p>border-collapse: <span>collapse</span></p> <table class="table1"> <tr><th>ردیف</th><th>نام رنگ ها</th></tr> <tr><td>۱</td><td>قرمز</td></tr> <tr><td>۱</td><td>سبز</td></tr> <tr><td>۱</td><td>أبی</td></tr> <tr><td>۱</td><td>سفید</td></tr> </table> </div> <div class="wrapper"> <p>border-collapse: <span>separate</span></p> <table class="table1"> <tr><th>ردیف</th><th>نام رنگ ها</th></tr> <tr><td>۱</td><td>قرمز</td></tr> <tr><td>۱</td><td>سبز</td></tr> <tr><td>۱</td><td>أبی</td></tr> <tr><td>۱</td><td>سفید</td></tr> </table> </div>
css
body { direction: rtl; font-family: "segoe ui"; display: flex; justify-content: space-around; } .table1 { border-collapse: collapse; } .table2 { border-collapse: separate; } table, th, tr, td { border: 1px solid #777777; padding: 5px; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
این ویژگی در تمام مرورگرها پشتیبانی می شود.