Setting CSS class to angular component issue

Question

I have a module which is a table actually. The table.component.html source code as follow:

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

And the theader.component.html source code as follow:

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

Furthermore, the content of style.css as follows:

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

I don't know why the text "Table Header" does not align center. However, the underline decoration works.

Even the computed CSS show the text already aligned. I attached a screen dump for your reference.

This is my app in stackblitz.

by introducing theader, you are breaking the basic semantic structure for a table. This can result in unexpected issues, like the one you are facing now. — Nidhin Joseph
– Nidhin Joseph, Commented Sep 17, 2019 at 3:29

Nikhil · Accepted Answer · 2019-09-17 03:37:47Z

1

You are applying text-align: center on <thead>. This ensures that the content inside <thead> is aligned center.

But <thead> element is in <table> and is not aligned center. You have apply text-align: center on the <thead>'s parent element which is <table>.

Make following change to your CSS and it should work. But remember that this will also align center other children of <table>.

table
{
    // Other properties.

    text-align: center;
}

Live demo on StackBlitz: https://stackblitz.com/edit/angular-7ce5qe

answered Sep 17, 2019 at 3:37

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hsuan Lee · Accepted Answer · 2019-09-17 03:22:41Z

0

You need reset your theader component styles.

@Component({
  ...
  selector: 'theader',
  styles: [`
   :host {
      width: 100%;
      display: inherit;
   }
 `],
})

https://stackblitz.com/edit/angular-xo5vhq?file=src%2Fapp%2Ftable%2Ftheader%2Ftheader.component.ts

edited Sep 17, 2019 at 3:22

answered Sep 17, 2019 at 3:14

Hsuan Lee

2,3501 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

Setting CSS class to angular component issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related