Tagged: code, CSS, data tables, supsystic, tables, vertical align
- This topic has 4 replies, 3 voices, and was last updated 5 years, 3 months ago by
Anonymous.
- AuthorPosts
- December 7, 2017 at 19:39 #16115
AnonymousInactiveIs there a complete list of CSS selectors for use with the Data Tables plugin.
In many searches I have found some such as #supsystic-table-n_wrapper {to identify the container for table #n} and I have discovered others but I know there are many more that would be useful.Descriptions or even better, examples of them in use would be great. Short of that, any recommendations of other existing forum pages that go into css details would also be useful – the forum search leaves a bit to be desired…
Thanks…
December 11, 2017 at 17:29 #16133
mila_supportMemberHi @daine
Thank you for contacting us about Data Tables plugin.
You can find interesting instruction and example with css styles in use by following this link – https://supsystic.com/table-with-css-styles-example/
Also, we have created the new category inside documentation – Custom Codes and store there most common codes were asked – https://supsystic.com/docs/custom-codes-data-tables/
And some FAQs –
Change table search font color – https://supsystic.com/documentation/change-table-search-font-color/
How to change table and cell size – https://supsystic.com/documentation/change-table-cell-size/
CSS Editor in use – https://supsystic.com/documentation/use-css-editor/December 20, 2017 at 01:43 #16163
info848969ParticipantTo follow-up on this question, I am having issues targeting the scrolling header.
The following works great but I believe is not specific enough. How would you change the below to target only #supsystic-table-9 ?.dataTables_scrollHeadInner { background-color: rgba(38, 38, 38, 1); color: white; } table.dataTable thead th, table.dataTable thead td { vertical-align: middle; }December 20, 2017 at 23:58 #16179
mila_supportMemberHi @info848969
Please use the next one:
#supsystic-table-9 table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td { background-color: rgba(38, 38, 38, 1); color: white; } #supsystic-table-9 table.dataTable thead th, table.dataTable thead td { vertical-align: middle; }Also, note that now you can set vertical align of the needed cells on the Editor Tab – http://prntscr.com/hq7soz
December 21, 2017 at 00:41 #16180
AnonymousInactiveThanks but the above does not seem to do anything but also, I am changing the background-color, not anything with the cell borders.
I would have expected #supsystic-table-9 thead th would be the proper identifier but that also has no effect on the header.
However I have discovered that if I place the table short code into a div with a unique ID, I can then use that ID combined with the above classes to target just that specific header.
<div id="my-unique-id">[supsystic-tables id=8]</div>Then in the CSS
#my-unique-id .dataTables_scrollHeadInner { background-color: rgba(38, 38, 38, 1); color: white; } - AuthorPosts
- You must be logged in to reply to this topic.