Table style customizations

[techpet]

What is the best way to change the styles of the table internal elements? For example change the thead background-color or remove the border from td?

I've tried overriding them with:

<style type="scss">
table {
	td {
		border:none;
	}
}
</style>

and

<style type="scss">
.my-table {
	td {
		border:none;
	}
}
</style>

<Table class="my-table" ... />

but neither works.

[illright]

Due to the way Svelte scopes its styles, you have to specifically opt out of scoping for your styles to reach the components of Attractions. Try the following:

<style lang="scss">
-.my-table {
+.my-table :global {
	td {
		border:none;
	}
}
</style>

<Table class="my-table" ... />

[techpet]

Unfortunately that doesn't work either in my component...

Full code here:

<script lang="ts">
	import {Table} from 'attractions';


	const headers = [
    { text: 'First Name', value: 'firstName' },
    { text: 'Last Name', value: 'lastName' },
    { text: 'Age', value: 'age', align: 'end' },
  ];
  const items = [
    { firstName: 'John', lastName: 'Doe', age: 694 },
    { firstName: 'Leo', lastName: 'Tolstoy', age: new Date().getFullYear() - 1828 },
    { firstName: 'فلان', lastName: 'الفلاني', age: 42 },
    { firstName: 'Иван', lastName: 'Иванов', age: 69 },
  ];

</script>

<style lang="scss">
		.my-table :global {
				td {
					border:none;
				}
				
		}
		

</style>

<Table {headers} {items} alternatingRows={false} class="my-table" />

and the result:

[techpet]

If I place the style code inside the global.scss instead of inline into my component it works though. Any ideas?

[illright]

Oh, wait, sorry, I misled you there a bit. The :global modifier should be placed before .my-table, not after. However, to preserve scoping, you would need to add some scoped selector in the beginning, for example:

<script lang="ts">
  import { Table } from 'attractions';

  const headers = [
    { text: 'First Name', value: 'firstName' },
    { text: 'Last Name', value: 'lastName' },
    { text: 'Age', value: 'age', align: 'end' },
  ];
  const items = [
    { firstName: 'John', lastName: 'Doe', age: 694 },
    { firstName: 'Leo', lastName: 'Tolstoy', age: new Date().getFullYear() - 1828 },
    { firstName: 'فلان', lastName: 'الفلاني', age: 42 },
    { firstName: 'Иван', lastName: 'Иванов', age: 69 },
  ];

</script>

<style lang="scss">
  .something-local :global .my-table {
    td {
      border: none !important;
    }
  }
</style>

<div class="something-local">
  <Table {headers} {items} alternatingRows={false} class="my-table" />
</div>

Note the usage of !important. That's another problem to overcome – specificity. If you have a more specific selector, you can avoid !important, but if not, that should stay.

[techpet]

Perfect! It works this way, thank you very much!