double border-style for table does not work

Issue

I noticed that when I apply a border-style to my table tag, it only works for solid, dashed or dotted, but it doesn't for double, groove and so on.

Is there a limitation for border-style for tables? Or am I doing something wrong?

<table border="1px" style="border-collapse:collapse; 1px black; border-style:double;">
            <thead>
                <tr>
                    <th colspan="2" style="padding:5px; background-color:blue; color:white; font-family:Arial; font-size:14px">Pricelist</th>
            </tr>
        
                <tr>
                    <th style="padding:5px">Product</th>
                    <th style="padding:5px">Price</th>
                </tr>
        
            </thead>
        
        <tbody>
            <tr>
                <td style="padding:5px">item1</td>
                <td style="padding:5px">price1</td>
            </tr>
        
            <tr>
                <td style="padding:5px">item2</td>
                <td style="padding:5px">price2</td>
            </tr>
        
            <tr>
                <td style="padding:5px">item3</td>
                <td style="padding:5px">price3</td>
            </tr>
        
        </tbody>
    </table>

Solution

You should put 1px black into the property like, border-width: 1px; border-color: black; border-style: double; or just use border: 1px black double; to make it work. The border="1px" works "inside" the table, which you can set styles of tr, td, and th in css. I set different widths, 1px inside and 10px outside for you to see the differences clearly.

<table border="1px" style="border: 10px black double;">
            <thead>
                <tr>
                    <th colspan="2" style="padding:5px; background-color:blue; color:white; font-family:Arial; font-size:14px">Pricelist</th>
            </tr>
        
                <tr>
                    <th style="padding:5px">Product</th>
                    <th style="padding:5px">Price</th>
                </tr>
        
            </thead>
        
        <tbody>
            <tr>
                <td style="padding:5px">item1</td>
                <td style="padding:5px">price1</td>
            </tr>
        
            <tr>
                <td style="padding:5px">item2</td>
                <td style="padding:5px">price2</td>
            </tr>
        
            <tr>
                <td style="padding:5px">item3</td>
                <td style="padding:5px">price3</td>
            </tr>
        
        </tbody>
    </table>

Answered By - iplus26