htmlcssangularhtml-table
How do I make sure that my table headers aligns with my table data in a nested html table?
For context, I need a nested table to group table data (by pdo, program, location). The problem is my th does not aligned with my nested td when the columns are not fully expanded. I'm using Angular 14 and I made sure that my th and td have the same width using [style.width.px]="columnWidths[i]".
When columns not fully expanded, th and td does not aligned
Component.html
<div class="container-parent overflow-auto">
<table #parentTable class="table-hover table-parent w-100">
<thead>
<tr class="th-row">
<ng-container *ngFor="let header of tableHeaders; let i = index">
<th
class="table-headers"
*ngIf="i < 4"
[ngClass]="{ 'sticky-left': i < 2 }"
[style.display]="columns[i].visible ? '' : 'none'"
[style.width.px]="columnWidths[i]"
>
<i
class="material-icons align-middle"
[style.cursor]="'pointer'"
*ngIf="!columns[i + 1]?.visible && i < 3"
(click)="toggleColumn(i, 'add')"
>add_box</i
>
<i
class="material-icons align-middle"
[style.cursor]="'pointer'"
*ngIf="columns[i + 1]?.visible"
(click)="toggleColumn(i, 'remove')"
>indeterminate_check_box</i
>
{{ header }}
</th>
</ng-container>
<th class="table-headers" [style.width.px]="columnWidths[4]">
{{ tableHeaders[4] }}
</th>
</tr>
</thead>
<tbody>
<ng-container *ngIf="currentIndex == 0">
<!-- PDO ROW -->
<tr class="pdo-row" *ngFor="let pdo of tableData">
<!-- PDO NAME -->
<td
class="td-headers"
class="pdo-name-column sticky-left"
[style.width.px]="columnWidths[0]"
[style.display]="columns[0].visible ? '' : 'none'"
>
{{ pdo.name ?? '-' }}
</td>
<td class="td-headers" [colSpan]="tableHeaders.length - 1">
<table class="w-100 h-100">
<!-- UNIT ITEM ROW -->
<tr class="unit-item-row">
<!-- UNIT ITEM -->
<td
class="unit-item-column"
[style.width.px]="columnWidths[3]"
[style.display]="columns[3].visible ? '' : 'none'"
>
{{ programLocations?.unit_of_item ?? '-' }}
</td>
<!-- NO. ITEM -->
<td class="num-item-column" [style.width.px]="columnWidths[4]">
{{ pdo.num_of_items_pdo | number : '1.0-0' ?? '-' }}
</td>
</tr>
</table>
</td>
</tr>
</ng-container>
<ng-container *ngIf="currentIndex == 1">
<!-- PDO ROW -->
<tr class="pdo-row" *ngFor="let pdo of tableData">
<!-- PDO NAME -->
<td
class="td-headers"
class="pdo-name-column sticky-left"
[style.width.px]="columnWidths[0]"
[style.display]="columns[0].visible ? '' : 'none'"
>
{{ pdo.name ?? '-' }}
</td>
<td class="td-headers" [colSpan]="tableHeaders.length - 1">
<table class="w-100 h-100">
<!-- PROGRAM ROW -->
<ng-container
*ngFor="
let program of pdo.pdo_programs;
let programIndex = index
"
>
<tr class="program-row">
<!-- PDO PROGRAM -->
<td
class="pdo-program-column sticky-left"
[style.width.px]="columnWidths[1]"
[style.display]="columns[1].visible ? '' : 'none'"
>
{{ program.program ?? '-' }}
</td>
<td>
<table class="w-100 h-100">
<!-- UNIT ITEM ROW -->
<tr class="unit-item-row">
<!-- UNIT ITEM -->
<td
class="unit-item-column"
[style.width.px]="columnWidths[3]"
[style.display]="columns[3].visible ? '' : 'none'"
>
{{ programLocations?.unit_of_item ?? '-' }}
</td>
<!-- NO. ITEM -->
<td
class="num-item-column"
[style.width.px]="columnWidths[4]"
>
{{
program.num_of_items_program
| number : '1.0-0' ?? '-'
}}
</td>
</tr>
</table>
</td>
</tr>
</ng-container>
</table>
</td>
</tr>
</ng-container>
<ng-container *ngIf="currentIndex > 1">
<!-- PDO ROW -->
<tr class="pdo-row" *ngFor="let pdo of tableData">
<!-- PDO NAME -->
<td
class="td-headers"
class="pdo-name-column sticky-left"
[style.width.px]="columnWidths[0]"
[style.display]="columns[0].visible ? '' : 'none'"
>
{{ pdo.name ?? '-' }}
</td>
<td class="td-headers" [colSpan]="tableHeaders.length - 1">
<table class="w-100 h-100">
<!-- PROGRAM ROW -->
<ng-container
*ngFor="
let program of pdo.pdo_programs;
let programIndex = index
"
>
<tr class="program-row">
<!-- PDO PROGRAM -->
<td
class="pdo-program-column sticky-left"
[style.width.px]="columnWidths[1]"
[style.display]="columns[1].visible ? '' : 'none'"
>
{{ program.program ?? '-' }}
</td>
<td>
<table class="w-100 h-100">
<!-- LOCATION ROW -->
<tr
class="location-row"
*ngFor="
let programLocations of program?.pdo_program_locations
"
>
<!-- PROGRAM LOCATION -->
<td
class="location-column"
[style.width.px]="columnWidths[2]"
[style.display]="columns[2].visible ? '' : 'none'"
>
{{ programLocations?.location?.name ?? '-' }}
</td>
<td>
<table class="w-100 h-100">
<!-- UNIT ITEM ROW -->
<tr class="unit-item-row">
<!-- UNIT ITEM -->
<td
class="unit-item-column"
[style.width.px]="columnWidths[3]"
[style.display]="
columns[3].visible ? '' : 'none'
"
>
{{ programLocations?.unit_of_item ?? '-' }}
</td>
<!-- NO. ITEM -->
<td
class="num-item-column"
[style.width.px]="columnWidths[4]"
>
{{
pdo.num_of_items_pdo | number : '1.0-0' ?? '-'
}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</ng-container>
</table>
</td>
</tr>
</ng-container>
<!-- Grand total-->
<tr class="grand-total-row font-weight-bold">
<td
class="grand-total-column sticky-left"
[style.width.px]="columnWidths[0]"
[style.display]="columns[0].visible ? '' : 'none'"
>
Grand total
</td>
<td
class="grand-total-column sticky-left"
[style.width.px]="columnWidths[1]"
[style.display]="columns[1].visible ? '' : 'none'"
></td>
<td
class="grand-total-column"
[style.width.px]="columnWidths[2]"
[style.display]="columns[2].visible ? '' : 'none'"
></td>
<td
class="grand-total-column"
[style.width.px]="columnWidths[3]"
[style.display]="columns[3].visible ? '' : 'none'"
></td>
<td class="grand-total-column" [style.width.px]="columnWidths[4]">
{{ grandTotal.totalNumItems | number : '1.0-0' }}
</td>
</tr>
</tbody>
</table>
</div>
Component.css
table,
th,
td {
margin: 0;
padding: 0;
border-collapse: collapse;
font-size: 12px;
}
th:not(:first-child) {
position: sticky;
top: 0;
background-color: white;
}
th:first-child {
position: sticky;
top: 0;
left: 0;
z-index: 10;
background-color: white;
}
.table-parent {
min-width: 1440px;
}
.container-parent {
max-height: 100vh;
}
.grand-total-column:not(:first-child) {
position: sticky;
bottom: 0;
background-color: white;
}
.grand-total-column.sticky-left:first-child {
position: sticky;
bottom: 0;
left: 0;
z-index: 10;
background-color: white;
}
.pdo-name-column.sticky-left {
position: sticky;
left: 0;
background-color: white;
}
/* .grand-total-column.sticky-left:nth-child(2),
.table-headers.sticky-left:nth-child(2),
.pdo-program-column.sticky-left {
position: sticky;
left: 144px;
background-color: white;
} */
.th-row {
border-bottom: 2px solid #ccc;
}
.pdo-row,
.program-row:not(:last-child),
.location-row:not(:last-child),
.unit-item-row:not(:last-child) {
border-bottom: 1px solid #ccc;
}
.grand-total-row {
border-top: 2px solid #ccc;
}
.unit-item-column,
.grand-total-column:nth-child(4) {
border-right: 2px solid #ccc;
}
.table-headers:nth-child(5),
.num-item-column,
.grand-total-column:not(:first-child) {
text-align: right;
}
th,
.pdo-name-column,
.pdo-program-column,
.location-column,
.beneficiary-column,
.currency-column,
.num-beneficiaries-column,
.funding-needs-column,
.grand-total-column {
padding: 1px;
}
For sample demo, click here
Solution
I was able to fix this by using [style.min-width.px] instead of [style.width.px]. Using table-layout: fixed; makes the column not alligned
Sample demo
- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome