diff --git a/tailoff/css/site/components/table.css b/tailoff/css/site/components/table.css index 007ab2dd..7c061ec5 100644 --- a/tailoff/css/site/components/table.css +++ b/tailoff/css/site/components/table.css @@ -1,8 +1,11 @@ +.custom-table .table { + @apply w-full; +} .custom-table table { @apply block w-full border border-black; th { - @apply px-4 py-2 text-left bg-primary-300; + @apply px-4 py-2 text-left align-top bg-primary-300; } tr { @@ -34,6 +37,10 @@ } tbody { display: block; + + th { + @apply block w-full text-center; + } } } @@ -43,6 +50,11 @@ display: block; } + .custom-table table tbody th { + display: table-caption; + text-align: center; + } + .custom-table table tr { display: table; width: 100%; @@ -83,6 +95,12 @@ display: table-row-group; } + .custom-table table tbody th { + display: table-cell; + text-align: left; + width: auto; + } + .custom-table table th::before, .custom-table table td::before { display: none; diff --git a/tailoff/js/components/table.component.ts b/tailoff/js/components/table.component.ts index 52b6e4dd..7810753b 100644 --- a/tailoff/js/components/table.component.ts +++ b/tailoff/js/components/table.component.ts @@ -15,9 +15,15 @@ export class TableComponent { const tableHead = table.querySelector('thead'); if (tableHead) { - const headings = Array.from(tableHead.querySelectorAll('th')).map((th) => th.innerText); - Array.from(table.querySelectorAll('td')).forEach((td, index) => { - td.setAttribute('data-label', headings[index % headings.length]); + const headings = Array.from(tableHead.querySelectorAll('th')) + .reverse() + .map((th) => th.innerText); + Array.from(table.querySelectorAll('tbody tr')).forEach((tr) => { + Array.from(tr.querySelectorAll('td')) + .reverse() + .forEach((td, index) => { + td.setAttribute('data-label', headings[index]); + }); }); } }