Title: Customize Table Last modified: August 6, 2017 --- # Customize Table * Resolved [jamiwr](https://wordpress.org/support/users/jamiwr/) * (@jamiwr) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/) * I am trying to create a table based on a image that is above the current table. Can you help me get the right code to set this table? * Site: [http://moniquepowers.marketingbydata.com/eyebrow-tweezing-tinting/](http://moniquepowers.marketingbydata.com/eyebrow-tweezing-tinting/) * .tablepress thead th { font-family: geothe-gothic; font-size: 20px; color: # ffffff; } * .tablepress .even td { background-color: #00ff00; } * .tablepress-id-1 .column-3 { text-align: center; } * .tablepress-id-1 tbody td { font-family: geothe-gothic; font-size: 14px; color:# 5E3F2C; } * .tablepress thead th, .tablepress tfoot th { background-color: #ff7396; } * .tablepress thead .sorting:hover { background-color: #ffffff; } * .tablepress-id-1 .row-2 td { background-color: #FEDCD9; } * .tablepress-id-1 .row-2 td { background-color: #FEDCD9; } * .tablepress-id-1 .row-3 td { background-color: #FEDCD9; } * .tablepress-id-1 .row-4 td { background-color: #FEDCD9; } * .tablepress-id-1 .row-5 td { background-color: #FEDCD9; } * .tablepress-id-1 .row-6 td { background-color: #FEDCD9; } * .tablepress-id-1 .row-6 td { background-color: #FEDCD9; } * .tablepress-id-1 .row-7 td { background-color: #FEDCD9; } Viewing 10 replies - 1 through 10 (of 10 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9387702) * Hi, * thanks for your post, and sorry for the trouble. * This shorter “Custom CSS” should work here: * ``` .tablepress thead th { background-color: #ff7396; font-family: geothe-gothic; font-size: 20px; color: #ffffff; } .tablepress-id-1 tbody td { font-family: geothe-gothic; font-size: 14px; background-color: #FEDCD9; color: #5E3F2C; text-align: center; } ``` * Note that the font you are choosing is not available on every computer, so you might want to choose a different one. * Regards, Tobias * Thread Starter [jamiwr](https://wordpress.org/support/users/jamiwr/) * (@jamiwr) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9388712) * Thanks for the shortened code. It still looks like the table I had and not the one I am trying to achieve which is an image on the same page. * A couple of issues: First column body should not be centered There are not any white lines between each cell Column 2 row 6 has spacing between lines Column 2 and 3 headers are not centered Column 2 and 3 are not bold text * Please look at page and see image. * Thanks, * JW * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9389855) * Hi, * sorry about that. I had assumed that this was only a rough example. Please try this new version: * ``` .tablepress thead th { background-color: #ff7396; font-family: geothe-gothic; font-size: 20px; color: #ffffff; border: 1px solid #ffffff; } .tablepress-id-1 tbody td { font-family: geothe-gothic; font-size: 14px; background-color: #FEDCD9; color: #5E3F2C; border: 1px solid #ffffff; line-height: normal; } .tablepress-id-1 .column-2, .tablepress-id-1 .column-3 { text-align: center; font-weight: bold; } ``` * Regards, Tobias * [fun88id](https://wordpress.org/support/users/fun88id/) * (@fun88id) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9393598) * Hi Hi, how can I compress below style so that it applies to all tables that I am creating? * .tablepress-id-1 thead th, .tablepress-id-2 thead th, .tablepress-id-3 thead th, .tablepress-id-4 thead th { color: #ffffff; background-color: #242424; } * .tablepress-id-1 .column-2, .tablepress-id-2 .column-2, .tablepress-id-3 .column- 2, .tablepress-id-4 .column-2 { text-align: right; } * .tablepress-id-1 .channeltv, .tablepress-id-2 .channeltv, .tablepress-id-3 . channeltv, .tablepress-id-4 .channeltv { color: #25aae1; } * Instead of repeating the line “.tablepress-id-1 to 100” ?? * Thank you. * Thread Starter [jamiwr](https://wordpress.org/support/users/jamiwr/) * (@jamiwr) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9395906) * Thanks! That works. * Thread Starter [jamiwr](https://wordpress.org/support/users/jamiwr/) * (@jamiwr) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9396748) * Hey, * How do i have a CTA button under column 2 and 3? * Thread Starter [jamiwr](https://wordpress.org/support/users/jamiwr/) * (@jamiwr) * [8 years, 8 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9405301) * Any idea on how to add a CTA button under column 2 and 3? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 7 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9408228) * Hi, * sorry for the long delay. I was on holidays and could not reply earlier. * For this, you should add a new row and then use `#colspan#` in the third cell, to merge the second and third cells of that new row. Then, insert the HTML code for your button/image into the second cell. * Regards, Tobias * Thread Starter [jamiwr](https://wordpress.org/support/users/jamiwr/) * (@jamiwr) * [8 years, 6 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9501706) * Thanks! * Table looks great. The issue I am having now is that on mobile there is not any padding between the right and the table. * How do I adjust the table padding? * I have gone through all the FAQ’s and only found info around cell padding. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [8 years, 6 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9501991) * Hi, * this only happens when the table is wider than the available screen space. * You could try to reduce the padding in the cells a bit, to gain space: * ``` .tablepress thead th, .tablepress tbody td { padding: 8px; } ``` * If that’s not sufficient, you will have explore ideas for responsiveness, e.g. the `scroll` mode of the TablePress Extension from [https://tablepress.org/extensions/responsive-tables/](https://tablepress.org/extensions/responsive-tables/) * Regards, Tobias Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Customize Table’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) ## Tags * [multiple-tables](https://wordpress.org/support/topic-tag/multiple-tables/) * 10 replies * 3 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [8 years, 6 months ago](https://wordpress.org/support/topic/customize-table-2/#post-9501991) * Status: resolved