Custom CSS

  • I’d like to add CSS but cannot find the targets. DevTools show a class of “wpdt-cell” which does work to some degree. It also shows data-cell-id=”2″ which does not respond to css.

    I’ve tried #c2 and other combinations.

    <td class=”wpdt-cell ” data-cell-id=”C2″ data-col-index=”2″ data-row-index=”1″ style=” padding:10px;

    This is the HTML I’m trying to style. Do you have a detailed list of all the targets?

    Example: If I wanted to align the text to the left jut in one column, column or a single cell. How would I target that?

    ??? {
    text-align: left;
    }

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author wpDataTables

    (@wpdatatables)

    Hello,
    thanks for reaching out to us.
    –
    In Simple Tables, in order to just select a specific column to add styles,
    you can use this CSS :

    .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:nth-child(2){
    text-align: left;
}

    In my example, that was for the second column.

    But if you need any other column, change the number in brackets of the nth-child statement.
    –
    You can also do this for multiple columns, simply add another line of CSS, and select the column you need.
    –

    Now, for adding styles specifically for cells.
    You can add a CSS class directly in a cell of a table, and then you can edit, for example, for cell number 1 if you input this :

    <div class=”abc”>Some text 123</div>
    Then on the front end, we would add this custom CSS:

    td .abc {
   width: 350px;
}

    and this will, for example, change the column width on the front-end.

    It is a similar method to do any CSS rules that you wish to apply.

    –

    If you wish to add the same CSS to all tables, you can add this to main plugin settings/Custom JS and CSS/Custom CSS.
    We don’t have a page/place where we have all the selectors available, but we do our best to advise as much as our support can cover.

    Let me know if that helped. Thank you

Viewing 1 replies (of 1 total)
  • The topic ‘Custom CSS’ is closed to new replies.