![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#44004 closed defect (bug) (fixed)
Twenty Seventeen: CSS issue when using rowspan in tables
| Reported by: | aussi | Owned by: | ianbelanger |
|---|---|---|---|
| Priority: | normal | Milestone: | 5.5 |
| Component: | Bundled Theme | Version: | |
| Severity: | normal | Keywords: | has-screenshots has-patch |
| Cc: | Focuses: |
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)
Change History (17)
#4
@
8 years ago
- Summary TwentySeventeen Theme - CSS issue when using rowspan in tables → Twenty Seventeen: CSS issue when using rowspan in tables
#6
@
7 years ago
- Keywords needs-testing removed
Just tested the patch and it does fix the issue on the front-end. It does not work in the editor though. However, this may not matter because the Table Block does not allow you to use rowspan, it gets stripped out or you have to convert it to an HTML Block.
#9
@
7 years ago
- Milestone 5.3 → Future Release
Based on the latest comments, this ticket still needs some work. With Beta 1 of version 5.3 only a few days away, this is being moved to Future Release. If this ticket can be resolved in time for 5.3, feel free to re-milestone.
#11
@
6 years ago
- Keywords needs-testing removed
- Owner set to
- Status new → reviewing
Reviewing for commit.
#13
@
6 years ago
- Keywords fixed-major added
- Milestone 5.5 → 5.4.3
- Resolution fixed
- Status closed → reopened
Reopening for backport.
We have a 0.4em padding set for all
tdelements, which makes the content to stay nicely inside thetdwith an equal small padding all sides.td { padding: 0.4em; }But since the pseudo elements
:first-childand:last-childhave a left padding set to0just below the above rule, I feel we need to apply the same fortdandthas well. This will ensure all elements would have no left padding but have a padding of0.4emon other three sides, i.e.top,rightandbottom.The following works for me.
th:first-child, td:first-child, td, th { padding-left: 0; }