CODEWITHSUNDEEP
htmlcssangular
The KNVB
The KNVB

Reputation: 3844

Setting CSS class to angular component issue

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.

enter image description here

Upvotes: 2

Views: 254

Answers (2)

Nikhil
Nikhil

Reputation: 6643

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

Upvotes: 1

Hsuan Lee
Hsuan Lee

Reputation: 2330

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

Upvotes: 0

Related Questions