For the following table, the text in the thead element doesn't respond to any CSS rules.
I thought it would inherit the rules from thr table.declensionTable
element, but it doesn't.
I created a CSS rule with the table.declensionTable thead
selection, but that didn't work either.
What am I doing wrong?
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>
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 thethead
.http://www.w3schools.com/tags/tag_thead.asp