未应用主题样式

Question

对于以下 table，thead 元素中的文本不响应任何 CSS 规则。

我认为它会继承 table.declensionTable 元素的规则，但事实并非如此。

我用 table.declensionTable thead 选择创建了一个 CSS 规则，但这也不起作用。

我做错了什么？

body {
  font-family: "Verdana", Sans-serif;
}


table.declensionTable{
  font-family: "Courier New", Serif;
  border: 1px solid black;
  border-color: #000000;
  border-collapse: collapse;
  margin-bottom: 10px;
}

table.declensionTable thead{
  font-family: "Courier New", Serif;


}

table.declensionTable th{
  border: 1px solid black;
  border-color: #000000;
  border-collapse: collapse;

}

table.declensionTable td{
  border: 1px solid black;
  border-color: #000000;
  border-collapse: collapse;

}

<table class="declensionTable">
  <thead><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</thead>
  <tbody>
    <tr>
      <th></th><th>Singular</th><th>Plural </th>
    </tr>
    <tr>
      <td><strong>Nom</strong></td> <td>klub</td> <td>kluby</td>
    </tr>
    <tr> 
      <td><strong>Gen</strong></td> <td>klubu</td> <td>klubów</td> 
    </tr>
    <tr>
      <td><strong>Dat</strong></td> <td>klubowi</td> <td>klubom</td>
    </tr>
    <tr>
      <td><strong>Acc</strong></td> <td>klub</td>    <td>kluby</td>
    </tr>
    <tr>
      <td><strong>Inst</strong></td> <td>klubem</td> <td>klubami</td>
    </tr>
    <tr>
      <td><strong>Loc</strong></td>  <td>klubie</td> <td>klubach</td>
    </tr>
    <tr>
      <td><strong>Voc</strong></td>  <td>klubie</td> <td>kluby</td>
    </tr>
  </tbody>
</table>

Answer 1

您没有正确使用 thead 元素。它是用于对 header 内容进行分组的行的容器。如果在 thead.

中添加一行，它应该会按预期显示

The <thead> element must have one or more <tr> tags inside.

http://www.w3schools.com/tags/tag_thead.asp

Answer 2

可能是因为您混淆了浏览器和您的标记。

thead 标签需要 table 数据（tr、td 等）

为什么不在 table 上方使用带样式的 header 标签？

Fiddle: http://jsfiddle.net/on1ypL4z/

body {
    font-family:"Verdana", Sans-serif;
}
table.declensionTable {
    font-family:"Courier New", Serif;
    border: 1px solid black;
    border-color: #000000;
    border-collapse: collapse;
    margin-bottom: 10px;
}
h3.table-desc {
    font-family:"Courier New", Serif;
}
table.declensionTable th {
    border: 1px solid black;
    border-color: #000000;
    border-collapse: collapse;
}
table.declensionTable td {
    border: 1px solid black;
    border-color: #000000;
    border-collapse: collapse;
}

<h3 class="table-desc"><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</h3>

<table class="declensionTable">
    <tbody>
        <tr>
            <th></th>
            <th>Singular</th>
            <th>Plural</th>
        </tr>
        <tr>
            <td><strong>Nom</strong>
            </td>
            <td>klub</td>
            <td>kluby</td>
        </tr>
        <tr>
            <td><strong>Gen</strong>
            </td>
            <td>klubu</td>
            <td>klubów</td>
        </tr>
        <tr>
            <td><strong>Dat</strong>
            </td>
            <td>klubowi</td>
            <td>klubom</td>
        </tr>
        <tr>
            <td><strong>Acc</strong>
            </td>
            <td>klub</td>
            <td>kluby</td>
        </tr>
        <tr>
            <td><strong>Inst</strong>
            </td>
            <td>klubem</td>
            <td>klubami</td>
        </tr>
        <tr>
            <td><strong>Loc</strong>
            </td>
            <td>klubie</td>
            <td>klubach</td>
        </tr>
        <tr>
            <td><strong>Voc</strong>
            </td>
            <td>klubie</td>
            <td>kluby</td>
        </tr>
    </tbody>
</table>

Answer 3

这是您使用定义列表尝试执行的操作的替代方法：

<dl>
<dt>klub</dt>

    <dd>
        <div><em>club</em>; an inanimate masculine noun</div>
        <table class="declensionTable">
            <thead>
                <tr>
                    <th></th>
                    <th>Singular</th>
                    <th>Plural</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Nom</th>
                    <td>klub</td>
                    <td>kluby</td>
                </tr>
                <tr>
                    <th>Gen</th>
                    <td>klubu</td>
                    <td>klubów</td>
                </tr>
                <tr>
                    <th>Dat</th>
                    <td>klubowi</td>
                    <td>klubom</td>
                </tr>
                <tr>
                    <th>Acc</th>
                    <td>klub</td>
                    <td>kluby</td>
                </tr>
                <tr>
                    <th>Inst</th>
                    <td>klubem</td>
                    <td>klubami</td>
                </tr>
                <tr>
                    <th>Loc</th>
                    <td>klubie</td>
                    <td>klubach</td>
                </tr>
                <tr>
                    <th>Voc</th>
                    <td>klubie</td>
                    <td>kluby</td>
                </tr>
            </tbody>
        </table>
    </dd>
</dl>

Fiddle: http://jsfiddle.net/v4h6zkcz/2/

Answer 4

非常感谢您的帮助。
Regulus 和 Bitwise Creative 都是对的，但他们做得还不够。

You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.

事实证明我只是一个完整的 n00b，我把我的 th 标签放在 table 的 body 中，而不是在头 header。所以虽然我在 thead/thead 中需要一些 tr 标签是正确的，但事实是我已经正确格式化了 header - 放错地方了。

未应用主题样式

thead style not applied

html

css

html-table