ویژگی border-collapse در CSS

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

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
این ویژگی در تمام مرورگرها پشتیبانی می شود.