How do you set the width of a cell?

[flooyd]

example column
{
key: "blah"
...
...
class: "tableCell"
}

style

.tableCell {
width: 200px
}

I also tried min-width and max-width but apparently these don't apply to td elements. I also tried :global(.tableCell)

[dasDaniel]

I'm guessing the reason you are seeing that is that the svelte scopes the class to the component.

Wrapping your class with global, like: :global(.tableCell) { will allow the child component to use the style

For more info in how the scoping works have a look at https://svelte.dev/docs#style

Another way to alter the widths, though it shouldn't be necessary, is to us the nth-child selector, but the global is still required.

:global(th:nth-child(4), td:nth-child(4)) {
  width: 200px;
}

[flooyd]

I tried the former and it doesn't work. I can set background color, padding, etc. but width 200px doesn't apply😔

[flooyd]

Maybe it's because I didn't apply same style to header...

[dasDaniel]

should work, but the header will limit it based on content too

use max-width and apply to header as-well via headerClass

example: https://svelte.dev/repl/f0d3b564efeb45c895c0ddba34f05216

...
{
	key: "episode",
	title: "Episode",
	value: v => v.episode,
	sortable: true,
	class: "td-small",
	headerClass: "td-small",
},

<style>
	:global(.td-small) {
		width:5px;
		max-width:5px;
		overflow: hidden;
	}
</style>

[flooyd]

It's still not working :( could you take a look at this code if you get a chance

https://github.com/flooyd/mango/blob/master/client/src/components/MatchDetails.svelte

[flooyd]

I used display table-cell and now it works as I expect.

[dasDaniel]

it's not clear what you want the behaviour to be. but I did notice one thing. If you want .tableCell to be 200px and .tableHero is already a fixed width, browsers cannot honor all the widths and fill the width still, so the values will get re-calculated. You could set the tableHero to have the % witdh to fill the space (assuming you want the other columns to have the pixel based width)

example: https://svelte.dev/repl/a75cda453cbd425898e7eda5a63d5f67

the table-cell shouldn't be needed, but if it solves your problem, use it.