Table styling: how to un-extend bootstrap's .table in table{}

[pensivedog]

In node_modules/@hyas/doks-core/assets/scss/components/_tables.scss there are the following rules:

table {
  @extend .table;

  margin: 3rem 0;
}

This breaks styling of Highcharts tooltips displayed as tables (example here).

Deleting these lines solves the problem, but I'd prefer to not change anything directly in node_modules/@hyas/doks-core.

Is there a better way to fix this?

[h-enk]

Copy node_modules/@hyas/doks-core/assets/scss/app.scss to themes/my-doks-theme/assets/scss/app.scss and comment out @import "components/tables":

..

// 8. Add additional custom code here
@import "common/fonts";
@import "common/global";
@import "common/syntax";
@import "common/dark";
@import "components/alerts";
@import "components/buttons";
@import "components/callouts";
@import "components/code";
@import "components/comments";
@import "components/details";
@import "components/forms";
@import "components/images";
@import "components/mermaid";
@import "components/modals";
@import "components/search";
// @import "components/tables";
@import "components/tabs";

..

If needed, add custom table styling in themes/my-doks-theme/assets/scss/common/_custom.scss

[pensivedog]

Solved! Thank you :)