Table: Checkbox alignment in header (Th) is misaligned due to label margin-bottom #8360

What is the issue?

Table header checkboxes in <Th> elements have incorrect vertical alignment due to a margin-bottom on the <label> element. This causes the checkbox to be misaligned with the text baseline.

Expected behavior:
The checkbox in table headers should be vertically aligned with the text baseline, matching the alignment of checkboxes in table body cells.

Current behavior:
The checkbox appears slightly lower than it should be due to an extra margin-bottom on the label element.

Steps to reproduce

1. Create a table with selectable rows using <Th> with select prop
2. Observe the checkbox alignment in the header
3. Compare with checkbox alignment in body cells (<Td> with select prop)

Code example

import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';

const MyTable = () => {
  const [isHeaderSelected, setIsHeaderSelected] = React.useState(false);
  const [selectedRows, setSelectedRows] = React.useState(new Set());

  return (
    <Table>
      <Thead>
        <Tr>
          <Th 
            select={{
              onSelect: (_event, isSelecting) => setIsHeaderSelected(isSelecting),
              isSelected: isHeaderSelected
            }} 
          />
          <Th>Name</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td 
            select={{
              onSelect: (_event, isSelecting) => {
                const newSelected = new Set(selectedRows);
                isSelecting ? newSelected.add(0) : newSelected.delete(0);
                setSelectedRows(newSelected);
              },
              isSelected: selectedRows.has(0),
              rowIndex: 0
            }} 
          />
          <Td>Item 1</Td>
        </Tr>
      </Tbody>
    </Table>
  );
};

Root cause

The CSS for .pf-v6-c-table th label includes a margin-bottom that pushes the checkbox down. This is not present on td label elements, causing inconsistent alignment.

Workaround

.pf-v6-c-table th label {
  margin-bottom: 0;
}

Proposed solution

Remove or reduce the margin-bottom on .pf-v6-c-table th label to match the alignment of checkboxes in table body cells.

Product and version

• @patternfly/react-table: 6.4.2

• User project: OpenShift Console (using PatternFly DataView with table selection)

Type

Bug

Jira Issue: PF-4098