Table headers within the table body don't have the same vertical alignment as other cells

[vivienlacourba]

cc: @lcarcone who faced that issue while working on redesigning our WBS system.

Describe the issue

Within the table body, table header (<th>) content is aligned to the bottom of the cell, while regular cell (<td>) content is vertically centered, that seems odd to me and believe they should have the same vertical alignment.

Screenshot of a table showing this issue:

Corresponding table markup:

<table class="">
  <thead>
    <tr>
      <th>Column 1</th><th>Column 2</th><th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A heading which is aligned to the bottom.</th>
      <td>
        A normal cell whose content is aligned at the top. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ipsum massa, pharetra ut urna eget, venenatis scelerisque metus.
      </td>
      <td>
        <select name="q5:c4">
          <option value="0" title="I Cannot on Tuesday at  08 UTC">Cannot</option>
          <option value="1" title="I Can but prefer not on Tuesday at  08 UTC">Can but prefer not</option>
          <option value="2" title="I Can on Tuesday at  08 UTC">Can</option>
          <option value="3" title="I Can and prefer on Tuesday at  08 UTC">Can and prefer</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Recommended solution

Currently core.css has:

td {
  vertical-align: text-top;
}

th {
  vertical-align: bottom;
}

I believe this CSS rule should be updated so that only <th> elements that are part of a <thead> or <tfoot> will be aligned to the bottom of the cell, while other <th> elements will have the same alignment as <td> elements.

Suggested update:

td, th {
  vertical-align: text-top;
}

thead > tr > th, tfoot > tr > th {
  vertical-align: bottom;
}

Which should render as:

[NicolaSaunders]

Fix for this is at https://github.com/w3c/w3c-website-templates-bundle/pull/149

[jean-gui]

Fix deployed