In my angular application, I've implemented a component that represents a basic HTML table. However, I'm facing an issue with reducing the height of cells within the table. It seems like my CSS styling is not affecting the display as desired.
Here are the 'headers' and 'catNames' variables in my component.ts file:
catNames : string[] = ["Toto", "Tata", "Titi", "Mama", "Momo"];
headers: string[] = ["Head1", "Head2", "Head3", "Head4", "Head5"];
Below is the code snippet for my component's HTML structure:
<table>
<tr>
<th *ngFor="let header of headers">
{{header}}
</th>
</tr>
<tr>
<td *ngFor="let cat of catNames">
<p>{{cat}}</p>
</td>
</tr>
</table>
Here's my CSS styles for the table and its elements:
table {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border-collapse: collapse;
text-align: center;
width: 100%;
font-size: 12pt;
}
th {
border: 1px solid #dddddd;
text-align: center;
padding: 0px;
color: white;
background-color: dodgerblue;
}
td {
display: table-cell;
border: 1px solid #dddddd;
text-align: center;
margin: 0;
padding: 0;
border-spacing: 0;
}
The current display shows extra space on the top and bottom borders of the cell. How can I remove this unwanted spacing?
Could there be any mistakes in my CSS values that are causing this issue?