Style table to have transparent background with opaque text?

Question

I have a Bootstrap table that looks like this:

<table class="table table-striped table-condensed table-bordered">  
<tr>
<th>User</th>
<th>Points</th>
</tr>
<tr>
  <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td>
  <td class="active">{{player.points}}</td>
</tr>
</table>

In my CSS I've tried to make the table transparent via:

table{
    opacity: 0.3;
     }

This obviously makes the entire table transparent. How can I only make the background transparent? I tried changing background-color:rgba(), but that doesn't work either.

Thanks for any help!

~Carpetfizz

Answer 1

Use the following style:

table tr td, table tr th{
  background-color: rgba(210,130,240, 0.3) !important;
}

You will need to change the rgb portion to match your colors. The last argument in the property is the alpha setting which will make the background transparent.

You must also adjust the html to properly place the closing table tag.

<table class="table table-striped table-condensed table-bordered">  
    <tr>
        <th>User</th>
        <th>Points</th>
    </tr>
    <tr>
        <td class="active">{{player.name|replace("@mysummitps.org","")|replace("@summitsanjose.org","")|replace("@gmail.com","")}}</td>
        <td class="active">{{player.points}}</td>
    </tr>
</table>

JS Fiddle: http://jsfiddle.net/Lf9LG/