Computer >> Máy Tính >  >> Lập trình >> Javascript

Sử dụng thuộc tính thu gọn đường viền CSS

Sự sụp đổ của biên giới chỉ định liệu trình duyệt có nên kiểm soát sự xuất hiện của các đường viền liền kề chạm vào nhau hay không hay mỗi ô có nên duy trì kiểu dáng của nó hay không.

Ví dụ

Bạn có thể thử chạy đoạn mã sau đây để tìm hiểu cách làm việc với thuộc tính thu gọn đường viền

<html>
   <head>
      <style>
         table.one {
            border-collapse:collapse;
         }
         table.two {
            border-collapse:separate;
         }
         td.a {
            border-style:dotted;
            border-width:2px;
            border-color:#000000;
            padding: 20px;
         }
         td.b {
            border-style:solid;
            border-width:2px;
            border-color:#333333;
            padding:20px;
         }
      </style>
   </head>
   <body>
      <table class = "one">
         <caption>Border Collapse</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
      <br />
      <table class = "two">
         <caption>Border Separate</caption>
         <tr><td class = "a"> India</td></tr>
         <tr><td class = "b"> Australia</td></tr>
      </table>
   </body>
</html>