How do you change a table border opacity

Question

I have a webpage with a gradient background image. On this page is a table. I have set the borders to a 5px width and solid. I would like to make these borders opacity to 0% so users see the gradient background instead. Is this possible. This is the table I have so far.

<div style="margin: 0pt auto; width: 980px;background-color:white;">
<div style="500px;overflow:hidden">
    <table style="width: 100%; table-layout: fixed;">
    <tbody>
      <tr>
        <th style="border-bottom:5px solid rgba(255,0,0,.5);"><font color="red">Name</font></th>
        <th style="border-bottom:5px solid rgba(255,0,0,.5);"><font color="green">Event</font>        </th>
        <th style="border-bottom:5px solid rgba(255,0,0,.5);"><font color="blue">Description</font></th>
     </tr>
     <tr>
        <td style="width:150px;border-right:1px solid black;border-bottom:1px solid red;"><?         echo $Row['name']; ?></td>
        <td style="width:150px;border-right:1px solid black;border-bottom:1px solid green;"><? echo $Row['description']; ?></td>
        <td style="width:150px;border-bottom:1px solid blue;"><? echo $Row['detail']; ?></td>
     </tr>
   </tbody>
   </table>
</div>
</div>

I changed the color to rgba(255,0,0,.05) as previously suggested but it shows the white background set for the division outside the table. I want to show the true page background for the borders of the table which is a multicolored gradient.

This has been tagged as a duplicate but I was not told where the original question is. Using the rgb or rgba only changes the opacity to the background of the table cells. I want to show the page background which is behind the table which is a colored gradient. If this is a duplicated question please show me where the answer has been given. Thank you.

http://stackoverflow.com/questions/4062001/css3-border-opacity ? — Mike Shi, Jan 09 '14 at 02:04
Do you mean opacity to 0% (invisible) rather than opacity to 100% (visible)? — Ming, Jan 09 '14 at 02:04

score 2 · Answer 1 · answered Jan 09 '14 at 02:04

2

Use rgba: border-bottom:5px solid rgba(255, 0, 0, .5);

The lower the 4th nr the more transparent it will look. My example shows red.

answered Jan 09 '14 at 02:04

NewInTheBusiness

1,465
1
9
14

score 1 · Answer 2 · answered Jan 09 '14 at 02:04

1

find the RGB breakdown for the color you want (google it) and use

5px solid rgba(255,0,0,.5)

.5 is the alpha which is the transparency

answered Jan 09 '14 at 02:04

jmore009

12,863
1
19
34

How do you change a table border opacity

2 Answers2