Thuộc tính border-spacing trong CSS

Thuộc tính border-spacing trong CSS thiết lập khoảng cách giữa các ô trong một bảng, giả sử là bảng được hiển thị theo Model là các đường viền là riêng rẽ nhau.

Thuộc tính border-spacing có thể nhận giá trị:

length: bất kỳ đơn vị độ dài. Nếu bạn khai báo hai giá trị, thì giá trị đầu tiên áp dụng cho khoảng cách theo trục ngang và giá trị còn lại được áp dụng cho trục dọc.

Thuộc tính border-spacing có thể áp dụng cho:

Các phần tử hiển thị trong một bảng.

Cú pháp thuộc tính border-spacing trong DOM

object.style.borderSpacing = "2px";

Quảng cáo

Ví dụ thuộc tính border-spacing trong CSS

Ví dụ sau minh họa cách sử dụng thuộc tính border-spacing trong CSS.

GHI CHÚ: thuộc tính này không làm việc trong IE6 và NS 7.

<html>
   <head>
   
      <style type="text/css">
         table.one {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px 50px;
         }
      </style>
      
   </head>
   <body>
   
      <table class="one" border="1">
         <caption>Vi du gia tri separate va thuoc tinh border-spacing</caption>
         <tr><td> Cell A </td></tr>
         <tr><td> Cell B </td></tr>
      </table>
      <br />
      
      <table class="two" border="1">
         <caption>Vi du gia tri separate va thuoc tinh border-spacing</caption>
         <tr><td> Cell A </td></tr>
         <tr><td> Cell B </td></tr>
      </table>
      
   </body>
</html>

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: