I am working with a simple HTML table and an Infragistics (igx) grid to display data:
<div class="container">
<div class="row">
<div class="col-md-4">
<table> </table>
</div>
<div class="col-md-8">
<igx-grid #grid1 [data]="localData" [autoGenerate]="true"></igx-grid>
</div>
</div>
</div>
Here is the CSS I have used:
@import "~igniteui-angular/lib/core/styles/themes/index";
@include igx-theme($default-palette);
table {
width: 100%;
border-collapse: collapse;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
This is a snippet from my package.json file:
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
... (additional dependencies)
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.19",
"@angular/cli": "~8.3.19",
... (additional dev dependencies)
I tried placing both the table and the grid on the same row but it didn't work as expected. I'm wondering if the igx related CSS is causing any conflicts. Upon inspecting the styles in the developer tools, it seems to be using "core.scss" and "minireset.css". How should I proceed from here?