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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.