Question

I have a table. I just want the 1st column to align left and other columns align right. I use the following style:

<style>
    table{ width:100%;}
    .1col{ text-align:left;}
    .othercols{width:100px;}
    table>tbody>tr>td, table>tbody>tr>th { text-align:center;} 
</style>

Then I have my table:

<table>
    <tr>
        <th class="1col">Category</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
    </tr>
    <tr >
        <td class="1col">Some text</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

The result is that my 1col class is ignored. Any idea?

Answer 1

CSS Class can’t start with an integer, so try col1 instead.

Working example: http://jsfiddle.net/9X7kz/8/

Here’s the full grammar if you are interested:

http://www.w3.org/TR/CSS21/grammar.html#scanner

And this is the specific rule spec:

http://www.w3.org/TR/CSS21/syndata.html#characters

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, two hyphens, or a hyphen followed
by a digit. Identifiers can also contain escaped characters and any
ISO 10646 character as a numeric code (see next item). For instance,
the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.