CODEWITHSUNDEEP
htmlcsshtml-table
Deersfeet
Deersfeet

Reputation: 61

thead style not applied

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>

Upvotes: 0

Views: 6456

Answers (4)

Deersfeet
Deersfeet

Reputation: 61

So I appreciate the help.
Regulus and Bitwise Creative were both right, but they didn't take it far enough.

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.

It turns out I was just being a complete n00b and I put my th tags inside the body of the table, instead of in the thead header. So while it was right that I needed some tr tags inside thead /thead, the fact was I already had the header properly formatted- just in the wrong place.

Upvotes: 0

Anthony
Anthony

Reputation: 37065

Here's an alternative approach to what you are trying to do using a definition list:

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

Upvotes: 0

Bitwise Creative
Bitwise Creative

Reputation: 4105

Probably because you're confusing the browser with your markup.

The thead tag is expecting table data (tr, td, etc.)

Why not just use a styled header tag above the table?

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>

Upvotes: 0

regulus
regulus

Reputation: 1622

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.

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

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

Upvotes: 4

Related Questions