Custom CSS Class for tables

  • Resolved jpalinkas

    (@jpalinkas)


    2 years, 2 months ago

    So I have created custom css code to center the image, remove lines, etc. for a table.

    .tablepress-id-22 img {
	margin: 0 auto;
}

.tablepress-id-22,
.tablepress-id-22 tr,
.tablepress-id-22 tbody td,
.tablepress-id-22 thead th,
.tablepress-id-22 tfoot th {
	border: none;
}

    Instead of doing this for each table, I want to create a generic css class and use it for multiple table.

    I am new to css. Can someone please provide some step-by-step directions?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    For this, you can use the “Extra CSS classes” field on the table’s “Edit” screen:
    Just come up with your own custom name for the CSS class, like tablepress-my-styling or something else that describes/groups the tables. Then, use that in your “Custom CSS”, instead of the table-ID-based selector, e.g.

    .tablepress-my-styling img {
	margin: 0 auto;
}

    and so on.
    Finally, add the chosen class tablepress-my-styling to the “Extra CSS classes” text field on the “Edit” screen of those tables that should get this styling.

    Regards,
    Tobias

    Thread Starter jpalinkas

    (@jpalinkas)

    That worked perfect.

    Thanks!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias
    ?
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom CSS Class for tables’ is closed to new replies.