WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 7 weeks ago

#44004 new defect (bug)

TwentySeventeen Theme - CSS issue when using rowspan in tables

Reported by: aussi Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 4.9.5
Component: Bundled Theme Keywords: has-screenshots has-patch
Focuses: Cc:

Description

I've spotted an issue with the TwentySeventeen theme. This definition in styles.css:

th:first-child,
td:first-child {
    padding-left: 0;
}

causes problems when using tables containing rowspans. Specifically, this code:

<table width="100%">
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>

produces a table where Head 2 and Cell 2 have padding-left: 0.4em, while Cell 3 and Cell 4 have padding-left: 0. This produces a table with misaligned cells in the same column.

Attachments (2)

screenshot.png (2.8 KB) - added by subrataemfluence 7 weeks ago.
44004.diff (347 bytes) - added by jainnidhi 7 weeks ago.

Download all attachments as: .zip

Change History (5)

#1 @SergeyBiryukov
7 weeks ago

  • Component changed from Themes to Bundled Theme

#2 @subrataemfluence
7 weeks ago

  • Keywords has-screenshots added

We have a 0.4em padding set for all td elements, which makes the content to stay nicely inside the td with an equal small padding all sides.

td {
   padding: 0.4em;
}

But since the pseudo elements :first-child and :last-child have a left padding set to 0 just below the above rule, I feel we need to apply the same for td and th as well. This will ensure all elements would have no left padding but have a padding of 0.4em on other three sides, i.e. top, right and bottom.

The following works for me.

th:first-child,
td:first-child,
td,
th {
   padding-left: 0;
}

@jainnidhi
7 weeks ago

#3 @jainnidhi
7 weeks ago

  • Keywords has-patch added
Note: See TracTickets for help on using tickets.