下面的代码工作良好，并正确地显示了带有边框的表。
CSS文件:
table, th, td
{
border: 1px solid black;
}
tr.tableView:hover
{
background-color:#f5f5f5;
}
HTML；
<table>
<th> </th>
<th>S. No.</th>
<th>Title</th>
<th>Creation date</th>
<th>Modification date</th>
<tr class = "tableView" *ngFor = "let checkboxesBlog of filteredCheckBoxes; let i = index;" >
<td [formGroup] = "checkboxesBlog">
<input type = "checkbox"
formControlName = "checkboxValue"
(click) = "onCheckboxClicked( i )">
</td>
<td>{{ i + 1 }}</td>
<td routerLink = "/editor/{{checkboxesBlog.controls.blogId.value}}">
{{ checkboxesBlog.controls.blogTitle.value }}
</td>
<td>{{ checkboxesBlog.controls.creationDate.value }}</td>
<td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
</tr>
</table>
我试着把CSS代码放在下面:
.tableView
{
table, th, td
{
border: 1px solid black;
}
tr.tableView:hover
{
background-color:#f5f5f5;
}
}
一点效果都没有。
问题:
如何将上述CSS代码W.R.T类TableView放入CSS？
您的类TableView被分配给一个表行，但是您发布的最后一个CSS需要一个HTML包装器，其中类TableView包装整个表。 从表面上看，您可能会忽略这一点，因此CSS并不适用。
回复您的评论:这不是一个角度问题，而是一个HTML CSS问题。
以下操作可能对您有用（我已经从tr中删除了类，并将其添加到包装表的div容器中）:
<div class="tableView">
<table>
<th> </th>
<th>S. No.</th>
<th>Title</th>
<th>Creation date</th>
<th>Modification date</th>
<tr *ngFor = "let checkboxesBlog of filteredCheckBoxes; let i = index;" >
<td [formGroup] = "checkboxesBlog">
<input type = "checkbox"
formControlName = "checkboxValue"
(click) = "onCheckboxClicked( i )">
</td>
<td>{{ i + 1 }}</td>
<td routerLink = "/editor/{{checkboxesBlog.controls.blogId.value}}">
{{ checkboxesBlog.controls.blogTitle.value }}
</td>
<td>{{ checkboxesBlog.controls.creationDate.value }}</td>
<td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
</tr>
</table>
</div>
.tableView
{
table, th, td
{
border: 1px solid black;
}
tr:hover
{
background-color:#f5f5f5;
}
}
