CSS specific table

html css css-tables

John Doe · Jul 2, 2012 · Viewed 84.1k times · Source

I have an HTML document where I have two different tables. One is class Alpha and one is class Beta. I want to assign this css to class Beta only...

td
{
border-style:solid;
border-top:thick double #ff0000;
}

I can not figure out how to assign this only to Beta. Does anyone know how?

Answer

Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this:

<table class="beta">
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

.beta td {
    border-style:solid;
    border-top:thick double #ff0000;
}

If you need to apply the rule to multiple elements within .beta simply add an additional selector like this:

.beta td, 
.beta th {
    border-style:solid;
    border-top:thick double #ff0000;
}

Qapla'!