我有一个模块,它实际上是一个表。 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 中。
最佳答案
您正在申请 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
关于html - 将 CSS 类设置为 Angular 组件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57966739/