CSS在colgroup內的col標簽上沒有做任何事情

我有以下代碼：

<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>

以及以下 CSS 規則：

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

CSS 不會更改列的字體樣式，并且樣式表中沒有其他字體系列或字體粗細規則。當我使用檢查器并將滑鼠懸停在 col 上時，它會將整個列標記為受 CSS 規則影響。我確定這是非常簡單和愚蠢的事情，但我似乎無法找到問題所在。

uj5u.com熱心網友回復：

因為元素不是元素的后代，所以它們不會繼承 colgroup 樣式。

如果表不使用 colspan 屬性，則對每列使用 td:nth-child(an b) CSS 選擇器，其中 a 是表中列的總數，b 是列在桌子。只有在此選擇器之后才能使用樣式。

如果表格確實使用了 colspan 屬性，則可以通過組合適當的 CSS 屬性選擇器（如 [colspan=n]）來實作效果，盡管這并非微不足道。

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 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>

問候

uj5u.com熱心網友回復：

你可以只適用于這4個屬性border，background，width并且visibility對<col>和<column-group>元素。這是因為 W3 規范。

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

標籤：html css

上一篇：我正在嘗試從網站上抓取資料并在正文中使用JS函式取回基本HTML

下一篇：如何使用CSS使我們網站上的影像具有回應性？