CSS border-collapse: collapse এবং separate এর পার্থক্য

ওভারভিউ

নিচের ছবিটি collapse এবং separate-এর পার্থক্য নিরূপণ করে। border-collapse প্রপার্টির separate মান সেলগুলোর বর্ডার আলাদা করে দেয়:

উদাহরণ

নিচের কোড চালিয়ে border-collapse separate এবং collapse মানের পার্থক্য বুঝতে পারেন:

<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>