Styling not applied to DataTable in angular component

Question

I have an angular component with the JS DataTable within it.

The html for the component is similar to this:

<h3>Test</h3>

<table class="table table-striped table-bordered table-hover" #table id="table">
  <thead>
    <tr>
      <th *ngFor="let column of columns">{{column.name}}</th>
    </tr>
  </thead>
</table>

I have a css file for the component:

h3 {
  color: blue;
}

.paginate_button {
  padding: 100px;
}

Any styling I add for the table isn't applied but the styling for the h3 is!

If I add the .paginate_button style to the global styles.css the style is applied.

What am I missing?

Where exactly are you applying the paginate_button CSS Class in your Template? — SiddAjmera
– SiddAjmera, Commented May 31, 2019 at 10:43

Adrita Sharma · Accepted Answer · 2019-05-31 11:04:08Z

1

JS DataTable is a component in itself which has it's own css file, that's why the style you overwrite in your component css file is not getting reflected. However, if we write some style in global styles.css, it is applied in all the component automatically.

Class paginate_button isn't present in your component's template. It is actually present in JS DataTable's compoent. So the style cannot be change. Hope this makes sense. Thanks.

You can try this in global style.css:

.paginate_button {
  padding: 100px !important;
}

edited May 31, 2019 at 11:04

answered May 31, 2019 at 10:41

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

2 Comments

Sun Over a year ago

Thanks for the reply but it makes no difference.

Adrita Sharma Over a year ago

I thought so. It wont, you cannot change a style of one component from another component. The only way is global style.css

Collectives™ on Stack Overflow

Styling not applied to DataTable in angular component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related