Thuộc tính border-collapse trong CSS

Thuộc tính border-collapse trong CSS xác định một Border Model trong khi hiển thị một bảng. Thuộc tính này thường được sử dụng trong khi xác định các đường viền được hiển thị trong bảng.

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

collapse: các đường viền được hợp nhất thành một đường viền. Ví dụ, hai ô cạnh nhau sẽ có chung một đường viền (mà thực chất là hai đường viền – nếu được xác định).
separate: các đường viền là riêng rẽ với nhau. Tức là mỗi ô sẽ có đường viền riêng của ô đó.

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

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

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

object.style.borderCollapse = "bat ky gia tri nao trong hai gia tri tren";

Quảng cáo

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

Dưới đây là ví dụ minh họa cách sử dụng thuộc tính border-collapse và hai giá trị của thuộc tính này trong CSS.

<html>
   <head>
   
      <style type="text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
      
   </head>
   <body>
   
      <table class="one">
         <caption>Vi du gia tri collapse</caption>
         <tr><td class="a"> Cell A </td></tr>
         <tr><td class="b"> Cell B </td></tr>
      </table>
      <br />
      
      <table class="two">
         <caption>Vi du gia tri separate</caption>
         <tr><td class="a"> Cell A </td></tr>
         <tr><td class="b"> Cell B </td></tr>
      </table>
      
   </body>
</html>

Kết quả là:

Quảng cáo

Đã 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: