html - 将 CSS 类设置为 Angular 组件问题

Question

我有一个模块，它实际上是一个表。table.component.html源码如下:

<table border=1>
  <theader></theader>
</table>

theader.component.html源码如下:

<thead #theader>
  <tr><td class="alignCenter underlineText">Table Header</td></tr>
</thead>

另外，style.css的内容如下:

.alignCenter
{
    text-align: center;
}
.underlineText
{
    text-decoration: underline;
}
table
{
    border-spacing: 0;
    border-collapse: collapse;
    width:1660px;
}

我不知道为什么“表头”文本没有居中。但是，下划线装饰有效。

即使是计算出的 CSS 也显示文本已经对齐。我附上了一个屏幕转储供您引用。

这是 my app在 stackblitz 中。

Answer 1

您正在申请 text-align: center在 <thead> .这确保了内容里面 <thead>居中对齐。

但是<thead>元素在 <table>并且未对齐中心。您已申请text-align: center在 <thead> 上的父元素是 <table> .

对您的 CSS 进行以下更改，它应该可以工作。但请记住，这也会使 <table> 的其他 child 居中对齐.

table
{
    // Other properties.

    text-align: center;
}

StackBlitz 上的现场演示:https://stackblitz.com/edit/angular-7ce5qe