CODEWITHSUNDEEP
htmlcsshtml-table
Jeff Stone
Jeff Stone

Reputation: 319

Giving a table CSS class

I'm trying to make a table with custom CSS, and I have no idea what I'm doing wrong. Done this before, but for some reason am unable to get the darn CSS to show up... Just shows a blank table with no 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>

Upvotes: 5

Views: 28255

Answers (6)

N1tr0
N1tr0

Reputation: 485

As mentioned by others, you can't start the class name with a #. Also, need to either drop the 'table' prefix or change those that are on the tr's with tr.classname

Upvotes: 0

xan
xan

Reputation: 4696

You are not allowed to start class name with an integer. Check out the fiddle here.

Upvotes: 1

Michael Malinovskij
Michael Malinovskij

Reputation: 1422

.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 selector name cannot start with a digit.

Upvotes: 0

Tom Oakley
Tom Oakley

Reputation: 6403

I believe you cannot use a number to start a CSS property. Try using .yardsTable instead of .300yardsTable.

Upvotes: 3

Paul Radich
Paul Radich

Reputation: 715

Your css is wrong the classes are on the tr's not the table. 

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

Remove #'s from class names

Upvotes: 7

corymathews
corymathews

Reputation: 12619

You cannot start a css classname with a number. So 300yearsTableHeader is an invalid name

The spec gives more on this.

Upvotes: 4

Related Questions