stylesheet css for datables

[daftster]

Hi,

How do I override the css settings for the datables? How come the steps I've done below does not work.

1. Copy all ui-datatable entries from the main.css file and paste it to my components css file.
.ui-datatable table {
border-collapse: collapse;
width: 100%;
table-layout: fixed
}....
2. Tried changing the width above to 50% and do number 3 to see if it is taking effect.
3. Add a tag to the html tag? Is this correct?
<p-dataTable class="ui-datatable" [value]="logs" [rows]="10" [paginator]="true">
<p-column field="update_time" header="DateTime" [sortable]="true"></p-column>
<p-column field="src_ip" header="Source" [sortable]="true"></p-column>
<p-column field="dst_ip" header="Destination" [sortable]="true"></p-column>
</p-dataTable>

Thanks,

[cagatay.civici]

Where do you keep your css overrides? Inside an external css loaded with a link tag? Or using styles or stylesURL of your component?

[daftster]

I intend to use it in stylesURL of the component.

[cagatay.civici]

Then try removing scoping by setting view encapsulation to none;

Code: Select all

@Component({
   //...
   encapsulation: ViewEncapsulation.None
})

[daftster]

It worked! thanks!

[cagatay.civici]

That is good to hear!