Column width
-
Hi! Thanks for great plugin!
I have tried to set specific width to my columns – but I can’t – the CSS do not seem to affect the columns. I have read the FAQ, and some topic here on the support forum, but still can’t figure it out.Here, among other tables, I wish to set specific width:
https://www.kvantinvestering.se/exempel-pa-en-aktielista/
On column 2 and 8.Thanks!
The page I need help with: [log in to see the link]
-
Hi,
thanks for your post, and sorry for the trouble.
What exactly do you want to change in columns 2 and 8? I don’t really see a need for this.
Regardless, this is most likely not working because there’s no flexibility for the width left in your table. All columns are at their minimum possible column widths already. This is a forced result by the content in the cells. For example, long words like “RAPPORTDATUM” in column 7 or “Informationsteknik” in column 9 define the minimum width of these columns. In sum, these widths are then restricted by the overall width of the content area, and there’s no flexibility left for the remaining columns.
Regards,
TobiasI want to make columns 2 and 8 wider, I want to be able to set specific width. I have other tables on other pages as well that I want to do this with.
If I for example put this in CSS:
.tablepress-id-100 .column-1 { width: 120px; }nothing seem to happen. And I wonder why? How can I target specific columns in specific tables and then set exact width in px? Like in the CSS above.
Thanks in advice!
All the best!
/S-
This reply was modified 8 years, 4 months ago by
simon_json.
-
This reply was modified 8 years, 4 months ago by
simon_json.
-
This reply was modified 8 years, 4 months ago by
simon_json.
Hi again!
This happen even when I have enabled “Enable horizontal scrolling, to make viewing tables with many columns easier.” With this enabled it should be flexibility left for the remaining columns?Hi,
unfortunately, it’s not that trivial, due to how the browsers do the width calculations 🙁
You could maybe try increasing the priority, by adding the!importantflag:.tablepress-id-100 .column-1 { width: 120px !important; }In addition, I recommend to greatly simplify your “Custom CSS”. Instead of centering each column individually, with something like
.tablepress-id-100 .column-3 { text-align: center; }just change
.tablepress-id-100 td, .tablepress-id-100 th { text-align: left; }to
.tablepress-id-100 td, .tablepress-id-100 th { text-align: center; }and all cells in that table will be centered, but the code will be much shorter.
Regards,
TobiasThanks!
Unfortunately adding the !important flag do not work.
I found this thread: https://ww.wp.xz.cn/support/topic/column-width-in-tablepress-2/
Can I do something similar like your first answer in that thread?
On the site the author asks about, it now seem to work fine:
http://slovanbohnice.cz/index.php/muzi-a-rozpis-zapasu-a-vysledky/
I wish to accomplish the same result (but being able to sort as well).All the best!
/S-
This reply was modified 8 years, 4 months ago by
simon_json.
Hi,
sure, you could also reduce the padding.
Of course, just using the
!importantflag on column 1 will not help. That was just an example. If you want to reduce the width of column 1, you could add manual line breaks between the words in the header cell of column 1.
Then, to maybe influence column 8, you could prohibit automatic line breaks there, with.tablepress-id-100 .column-8 { white-space: nowrap; }Regards,
TobiasThanks!
But I want to increase the width of columns.
Like the second column on this table:
http://slovanbohnice.cz/index.php/muzi-a-rozpis-zapasu-a-vysledky/All the best!
/SHi,
that column could be made wider, because there was more space. In your table, there is not enough space to make columns wider.
Regards,
TobiasThanks for reply!
Could I force the table to scroll, and thereby get more space?
Can I use “Enable horizontal scrolling, to make viewing tables with many columns easier.” on Features on the DataTables JavaScript library? Or could I use this extension: https://tablepress.org/extensions/responsive-tables/
and use scroll mode?All the best!
/SHi,
by using the
scrollmode of the Extension (instead of the checkbox), you might indeed be able to force scrolling to get more space, but I can’t guarantee it. You would probably have to set the width of each column, including the!importantflag each time.Regards,
TobiasThanks!
I tried that but it did not work. Don’t know what I can do?All the best!
/SHi,
unfortunately, I’m out of ideas then either 🙁 I’m really sorry.
Regards,
Tobias -
This reply was modified 8 years, 4 months ago by
The topic ‘Column width’ is closed to new replies.