CSS not doing anything on col tag inside colgroup-CodePudding

I have the following code:

<table>
            <colgroup>
                <col >
                <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.

CodePudding user response：

Because elements are not descendant of the element, they won't inherit colgroup styles.

If the table doesn't use a colspan attribute, use the td:nth-child(an b) CSS selector per column, where a is the total number of the columns in the table and b is the ordinal position of the column in the table. Only after this selector the style can be used.

If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

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

td:nth-child(1) {
font-family: monospace;
    font-weight: bold;
    color: blue;
}

<table>
            <colgroup>
                <col >
                <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>

Regards

CodePudding user response：

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