I am facing a challenge while trying to set up a basic form with a table in the initial stages of my Angular project. I have been struggling to get the columns to align properly.
Despite numerous attempts with various styling options for HTML <table> elements such as <tr>, 'width', 'float', and experimenting with vertical bars, I still can't seem to achieve the desired alignment.
The code I have been working on is heavily inspired by a W3Schools demonstration page available at https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro. It is puzzling that despite following the example closely, the columns do not line up and the alternate row colors are also not appearing.
<style>
table {
border-collapse: collapse;
width: 5%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
width: 50%;
}
tr {
width: 100%;
}
tr:nth-child(even) {
background-color: #522a2a;
}
</style>
<form style="margin-left: 2%; margin-right: 2%">
<h3>Form</h3>
<table>
<tr>
<th>Category</th>
<th>Input</th>
</tr>
<div *ngFor="let key of memberKeys">
<tr>
<td>{{key}}</td>
<td><input type="text" [(ngModel)]="member[key]" [ngModelOptions]="{standalone: true}"/></td>
</tr>
</div>
</table>
<button type="submit">Submit</button>
</form>
I am perplexed as to why the columns are misaligned and the rows are not alternating background colors. Any advice would be greatly appreciated!