ویژگی border-spacing در CSS

border-spacing Property

ویژگی border-spacing در CSS فاصله بین حاشیه های (border) سلول های جدول را تعیین می کند. این ویژگی تنها زمانی اجرا می شود که مقدار ویژگی border-collapse برابر با separate باشد.

نحوه نوشتار

/* فاصله برای هر چهار جهت */
border-spacing: 2px;

/* فاصله عمودی | فاصله افقی */
border-spacing: 10px 2em;

مقادیر

طول یا اندازه

اندازه فاصله را مشخص می کند.

ویژگی border-spacing دو نوع مقدار میپذیرد:

اگر یک مقدار بپذیرد، این مقدار هم برای فاصله افقی و هم عمودی اعمال می شود.
اگر دو مقدار بپذیرد، اولی برای فاصله افقی و دومی برای فاصله عمودی اعمال می شود.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم. در جدولی که مقدار ویژگی border-collapse برابر با collaspse می باشد، فاصله بین سلولها از بین می رود:

html

<div class="wrapper">
    <p>border-collapse: <span>separate;</span></p>
    <table class="tb1">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </table>
</div>
<div class="wrapper">
    <p>border-collapse: <span>collapse;</span></p>
    <table class="tb2">
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </table>
</div>

css

.tb1 {
   border-spacing: 1em;
   border-collapse: separate;
}
.tb2 {
   border-collapse: collapse;
   margin-top: 1em;
   margin-left: 5%;
}
td {
   padding: 1rem 1.2rem;
   border-radius: 6px;
   border: 1px solid red;
}

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

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