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

Update - 2023

BootStrap v5.3

Adding to the above - to get a table with a transparent background, I had to apply a separate class ( in your css file ) as below;

.table_custom { --bs-table-bg: transparent !important; }

Add this table_custom to the table tag in your code as follows

<table class="table table-sm table_custom">

for a table of type small with a transparent background.

Answer 2

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/