CSS not doing anything on col tag inside colgroup

Issue

I have the following code:

<table>
            <colgroup>
                <col class="left">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th scope="col">HTML tag</th>
                    <th scope="col">Use</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>table</td>
                    <td>Creates the table element</td>
                </tr>
                <tr>
                    <td>thead</td>
                    <td>Wraps the heading section</td>
                </tr>
                <tr>
                    <td>tbody</td>
                    <td>Wraps the main body of the table</td>
                </tr>
                <tr>
                    <td>tfoot</td>
                    <td>Wraps the footer of the table</td>
                </tr>
                <tr>
                    <td>tr</td>
                    <td>Creates a row</td>
                </tr>
                <tr>
                    <td>th</td>
                    <td>Creates a heading cell</td>
                </tr>
                <tr>
                    <td>td</td>
                    <td>Creates a data cell</td>
                </tr>
            </tbody>
        </table>

And the following CSS rule:

.left {
    font-family: monospace;
    font-weight: bold;
}

The CSS isn't changing the column's font style and there are no other font-family or font-weight rules in the stylesheet. When I use the inspector and hover over the col it marks the whole column as affected by the CSS rule. I'm sure it's something really simple and stupid, but I can't seem to find the problem.

Solution

You can apply only these 4 properties border, background, width and visibility to <col> and <column-group> elements. It is because of the W3 specification.

Reference - https://www.w3.org/TR/CSS21/tables.html#columns

Answered By - Mohit Kushwaha