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; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.