List of data table CSS selectors and examples

Home Forums Data Table Plugin List of data table CSS selectors and examples

This topic contains 4 replies, has 3 voices, and was last updated by  daine 1 year, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #16115

    daine
    Participant

    Is 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…

    #16133
    mila_support
    mila_support
    Keymaster

    Hi @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 documentationCustom 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/

    #16163

    info848969
    Participant

    To 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 ?

    #16179
    mila_support
    mila_support
    Keymaster

    Hi @info848969

    Please use the next one:

    Also, note that now you can set vertical align of the needed cells on the Editor Tab – http://prntscr.com/hq7soz

    #16180

    daine
    Participant

    Thanks 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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Get plugins bundle today and save over 80%