fix: Tables: style td in table header as th, use td instead of th for…

… select all headers (#5172)
BrightspaceUI · Nov 25, 2024 · 200cc26 · 200cc26
1 parent cf3c38d
commit 200cc26
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/components/table/demo/table-test.js b/components/table/demo/table-test.js
@@ -103,7 +103,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 					<thead>
 						${this.multiLine ? html`
 							<tr>
-								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								<td scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></td>
 								${this._renderDoubleSortButton('City', 'Country')}
 								<th scope="col" colspan="${columns.length + 1}" sticky>
 									Metrics
@@ -116,7 +116,7 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 							</tr>
 						` : html`
 							<tr>
-								<th scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></th>
+								<td scope="col" sticky><d2l-selection-select-all></d2l-selection-select-all></td>
 								${this._renderDoubleSortButton('City', 'Country')}
 								${columns.map(columnHeading => this._renderSortButton(columnHeading))}
 								${this._renderMenuSortButton('Coordinates', ['Latitude', 'Longitude'])}

diff --git a/components/table/table-wrapper.js b/components/table/table-wrapper.js
@@ -87,7 +87,10 @@ export const tableStyles = css`
 	/* header cells */
 	.d2l-table > thead > tr > th,
 	.d2l-table > * > tr.d2l-table-header > th,
-	.d2l-table > * > tr[header] > th {
+	.d2l-table > * > tr[header] > th,
+	.d2l-table > thead > tr > td,
+	.d2l-table > * > tr.d2l-table-header > td,
+	.d2l-table > * > tr[header] > td {
 		background-color: var(--d2l-table-header-background-color);
 		font-size: 0.7rem;
 		line-height: 0.9rem;
@@ -214,6 +217,7 @@ export const tableStyles = css`
 
 	/* all header cells */
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th,
+	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > td,
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > *,
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr[header] > * {
 		position: -webkit-sticky;
@@ -224,6 +228,8 @@ export const tableStyles = css`
 	/* header cells that are also sticky */
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th.d2l-table-sticky-cell,
 	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > th[sticky],
+	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > td.d2l-table-sticky-cell,
+	d2l-table-wrapper[sticky-headers] .d2l-table > thead > tr > td[sticky],
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > .d2l-table-sticky-cell,
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr.d2l-table-header > [sticky],
 	d2l-table-wrapper[sticky-headers]:not([sticky-headers-scroll-wrapper]) .d2l-table > * > tr[header] > .d2l-table-sticky-cell,
@@ -756,10 +762,10 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		const stickyRows = Array.from(this._table.querySelectorAll(SELECTORS.headers));
 		stickyRows.forEach(r => {
 			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset, 0px))`;
-			const ths = Array.from(r.querySelectorAll('th'));
+			const ths = Array.from(r.querySelectorAll('th,td'));
 			ths.forEach(th => th.style.top = thTop);
 
-			const rowHeight = r.querySelector('th:not([rowspan])')?.offsetHeight || 0;
+			const rowHeight = r.querySelector('th:not([rowspan]),td:not([rowspan])')?.offsetHeight || 0;
 			rowTop += rowHeight;
 		});
 	}