Question

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

我认为它将从thr 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元素权限。它是用于对标题内容进行分组的行的容器。如果您在thead内添加一行，它应该按预期显示。

＆lt; thead＆gt;元素必须具有一个或多个＆lt; tr＆gt;里面的标签。

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

Answer 2

可能是因为您将浏览器与标记混淆。

thead代码需要表格数据（tr，td等。）

为什么不在表格上方使用样式标题标记？

小提琴：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>

小提琴：http://jsfiddle.net/v4h6zkcz/2/

Answer 4

所以我很感激你的帮助轩辕和Bitwise Creative都是正确的，但他们并没有做得足够远。

你没有正确使用thead元素。它是用于对标题内容进行分组的行的容器。如果你在thead中添加一行，它应该按预期显示。

事实证明我只是一个完整的n00b而且我将标签放在桌子的主体内，而不是在 thead 标头中。因此，虽然我在 thead / thead 中需要一些 tr 标签是正确的，但事实是我已经正确地格式化了标题 - 只是在错误的位置。

thead风格未应用

4 个答案: