You will find there is a limit to what you can accomplish because tables always try to fit all the content in. To change the width of a column, you need to target the top cell (in this case it’s a “TH”) with the name of the column field as the class name…something like
.participant-list th.first_name {
width: 100px;
}
I just add that css to style.css, ofcourse changed class name, but nothing happens. What shall I do?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Link us the page with the table that you want to style and we can provide more accurate CSS snippets
Well
http://test.mammuthus.ru/table/
Field titles are the same as names.
I use that CSS in my style.css:
.participant-list th.promo {
width: 500px;
}
This is what I meant by there would be limits. You can´t force a column to be wider if all the other columns are taking up all the space. You can make columns narrower. If you want a column to be wide, try making some of the other columns narrower to give it some space.
hmm. but when I try
.participant-list th.promo {
width: 5px;
font-size: 10%;
}
nothing changes too.
it won’t as long as there is content in that column that wants to be wider than the space you’re giving it. When you’ve got a table that is full of content like that, and already stretched to the width of the page, you can’t control the column widths very well.
Changing the font size in the rule will only change the font size in the header cell, so that will have limited effect. If you had fewer columns, you’d have better luck changing the width.
The only way to totally take control of the widths is to wrap the content of every cell with a classed span and then you can do things like change the font size, hide overflow, etc. You can do this with a custom template.
Changing the font size in the rule will only change the font size in the header cell, so that will have limited effect.
Yes, I know that, but font size didn’t changes with that CSS too.
I try it with fewer colums – the same effect 🙁
Yeah, looks like you’ll need to resort to using a custom template.
