在我的 Angular 应用程序中,我有一个仅代表 html 表格的组件。我遇到的问题是我无法降低单元格高度。似乎我的 css 对显示没有影响。
这里是我的 component.ts 中的标题和 catNames var:
catNames : string[] = ["Toto", "Tata", "Titi", "Mama", "Momo"];
headers: string[] = ["Head1", "Head2", "Head3", "Head4", "Head5"];
这是我的组件 HTML :
<table>
<tr>
<th *ngFor="let header of headers">
{{header}}
</th>
</tr>
<tr>
<td *ngFor="let cat of catNames">
<p>{{cat}}</p>
</td>
</tr>
</table>
这是我的 CSS:
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;
}
它是如何显示的,我想删除单元格顶部和底部边框上的额外空间:
我的 CSS 值有错误吗?
最佳答案
删除 <P>
标签 。因为它会给填充本身。否则以负号填充。但这不是正确的方法。所以最好的方法是删除 <p>
并仅使用插值,它将被视为文本。或者你可以直接给css <p>
而不是 td。
关于html - Angular 5 无法调整 html 表格上的单元格高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52310721/