double border-style for table does not work - html

Question

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>

Answer 1

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>

Answer 2

Your table border needs a "width." Try..
table {
border-collapse: collapse;
border-style: double;
border-width: 4px;

Answer 3

Border Width is Too Small.
Specifying too small of a border-width will not allow for the border-style to be double. Essentially, it's too small to show two separate lines.
For example, if use something like border-top: #333 double 1px; then only a single line will be shown.
In fact, using 2px for the width, like border-top: #333 double 2px;, will still not show a double line. Instead, it will just show a thicker, 2px-wide line.
I had to use at least 3px for the double border to show properly, like border-top: #333 double 3px;.
This makes sense, considering it takes 3 pixels to show two 1px lines with a 1px gap between them.
1px (line) + 1px (gap) + 1px (line) = 3px
So your two options are:
Specify a bigger border-width, like border-top: #333 double 3px;.
-or-
Do not specify the border-width, like border-top: #333 double;, and let the browser/renderer figure it out.
Hopefully that helps others.