Geek asks and answers

Providing a CSS class class

I'm trying to make a table with custom CSS, and I have no idea what I'm doing wrong. This has been done before, but for some reason I can’t get the damn CSS to show ... It just shows an empty table without style.

CSS:

table.300yardsTable{background:#EEE;color:#333;font-size:14px;text-align:center;}
table.300yardsTableHeader tr{background:#CCC;font-weight:bold;}
table.300yardsRow tr{background:#EEE;color:#333;}
table.300yardsRow:hover tr{background:#242424;color:#CCC;}

Table:

<table width="600" border="1" align="center" cellpadding="2" cellspacing="2" class="300yardsTable">
<tr class="300yardsTableHeader">
    <td width="25%">LOFT</td>
    <td width="25%">HAND</td>
    <td width="25%">LIE</td>
    <td width="25%">VOLUME</td>
</tr>
<tr class="300yardsRow">
    <td>8*-12*</td>
    <td>RH/LH</td>
    <td>61*</td>
    <td>460cc</td>
</tr>
</table>
+5
source share
6 answers

Your css is wrong, classes are on tr not a table.

tr.yardsTableHeader tr{background:#CCC;font-weight:bold;}
tr.yardsRow {background:#EEE;color:#333;}
tr.yardsRow:hover{background:#242424;color:#CCC;}

Remove # from class names

+6
source

You cannot run css class name with number. So 300yearsTableHeader is an invalid name

The spectrum gives more about this.

+4
source

, , CSS. .yardsTable .300yardsTable.

+3

class integer. .

+1
.300yardsTable {background:#EEE;color:#333;font-size:14px;text-align:center;}

    .300yardsTable .300yardsTableHeader {background:#CCC;font-weight:bold;}

    .300yardsTable .300yardsRow {background:#EEE;color:#333;}
         .300yardsTable .300yardsRow:hover {background:#242424;color:#CCC;}

Css .

0

As already mentioned, you cannot run the class name with #. In addition, you must either remove the table prefix or change the ones that are in tr with tr.classname

0
source

More articles:


All Articles