Title: CSS & Tablepress
Last modified: August 21, 2016

---

# CSS & Tablepress

 *  Resolved [jeanbeatles](https://wordpress.org/support/users/jeanbeatles/)
 * (@jeanbeatles)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/css-tablepress-1/)
 * Hi,
 * First apologize my very poor english language.
    I’ve made that kind of table :
   [http://bit.ly/1phkIIy](http://bit.ly/1phkIIy) it’s about soccer games. I want
   something like that : [http://bit.ly/1yiN8pY](http://bit.ly/1yiN8pY) (at the 
   end of the webpage) i don’t use CSS cause i don’t really understand how it works.
   Is it an easyway to paste css style in tablepress option page ? do you know if
   a css generator could works ?
 * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/)

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

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/css-tablepress-1/#post-5020460)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * To replicate the styling of that table from the second link, you will at first
   need to extract the relevant CSS from that page, maybe with something like the“
   Developer Tools” in the browser (which most modern browsers offer). As CSS can
   be very flexible, there’s no real automatic way to do this, so that this will
   require some manual work.
    The examples in the TablePress FAQ at [http://tablepress.org/faq/](http://tablepress.org/faq/)
   as well as in the documentation [http://tablepress.org/documentation/](http://tablepress.org/documentation/)
   might be helpful then on finding the modified code that needs to be pasted into
   the “Custom CSS” textarea on the “Plugin Options” screen of TablePress.
 * Regards,
    Tobias
 *  Thread Starter [jeanbeatles](https://wordpress.org/support/users/jeanbeatles/)
 * (@jeanbeatles)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/css-tablepress-1/#post-5020469)
 * Hi, and thanks for replying;
 * I’ve used “developper Tools” to find ccs style in the second link, but it’s hard
   to understand et very difficult to use it in my own css page.
 * But, if you take a look again at my first link, and thanks to your précedent 
   post, i’ve wrote this code in the css option of TablePress :
 *     ```
       .tablepress,
       .tablepress tr,
       .tablepress tbody td,
       .tablepress thead th,
       .tablepress tfoot th {
       	border: none;
       	padding: 0;
       }
   
       .tablepress thead th,
       .tablepress tfoot th {
       	background-color: #000000;
       	font-family: Trebuchet;
       	font-size: 12px;
       	font-style: bold;
       	color: #FFFFFF;
       }
   
       .tablepress tbody td {
       	font-family: Trebuchet;
       	font-size: 12px;
       	color: #000000;
       	line-height: 100%;
       }
   
       .tablepress .column-1 {
       	width: 5%;
       	text-align: center;
       }
   
       .tablepress .column-2 {
       	width: 7%;
       	text-align: center;
       }
   
       .tablepress .column-3 {
       	width: 13%;
       	text-align: center;
       }
   
       .tablepress .column-4 {
       	width: 16%;
       	text-align: left;
       }
   
       .tablepress .column-5 {
       	width: 13%;
       	text-align: center;
       	font-weight: bold;
       }
   
       .tablepress .column-6 {
       	width: 16%;
       	text-align: right;
       }
   
       .tablepress .column-7 {
       	width: 5%;
       	text-align: center;
       }
   
       .tablepress .column-8 {
       	width: 5%;
       	text-align: center;
       }
   
       .tablepress .column-9 {
       	width: 15%;
       	text-align: center;
       }
   
       .tablepress .column-10 {
       	width: 5%;
       	text-align: center;
       }
   
       .tablepress- {
       	width: auto;
       	margin: 0 auto 1em;
       }
       ```
   
 * It’s not so bad, and i can use it like that.
    But what i want to know, it’s
 * – how can i change font, style and colour of the headline. I wrote this part,
   without effect :
 *     ```
       .tablepress thead th,
       .tablepress tfoot th {
       	background-color: #000000;
       	font-family: Trebuchet;
       	font-size: 12px;
       	font-style: bold;
       	color
       ```
   
 * – Can i have smaller “line-height” ?
 * – How to change color of the rows, replacing default white & blue ?
 * Thanks
 * jeanchristophe
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 12 months ago](https://wordpress.org/support/topic/css-tablepress-1/#post-5020471)
 * Hi,
 * good to hear that you are making this great progress!
 * Due to how your theme uses CSS in tables, you’ll have to increase the priortity
   of some CSS properties. So, if something is not working (like those font or color
   changes), try appending the `!important` keywork, like
 *     ```
       property: value !important;
       ```
   
 * With that, and with [http://tablepress.org/faq/change-color-alternating-rows/](http://tablepress.org/faq/change-color-alternating-rows/),
   you can change the colors.
    For the line height, just reduce the `padding` in
   the cells.
 * Regards,
    Tobias
 *  Thread Starter [jeanbeatles](https://wordpress.org/support/users/jeanbeatles/)
 * (@jeanbeatles)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css-tablepress-1/#post-5020501)
 * Hi Tobias,
 * Thanx for ALL ! I’m thinking about the way i can use Table since months, and 
   now it’s ok. I’m not joking : you helped me A LOT.
 * One last question : Please take a look to my first link.
    Then, take a look here:
 * > .tablepress,
   >  .tablepress tr, .tablepress tbody td, .tablepress thead th, .
   > tablepress tfoot th { border: none; padding: 0; }
   > .tablepress thead th,
   >  .tablepress tfoot th { background-color: #000000 !important;
   > font-family: Trebuchet; font-size: 12px !important; font-style: bold !important;
   > color: #FFFFFF !important; }
   > .tablepress .odd td {
   >  background-color: #808080; }
   > .tablepress .even td {
   >  background-color: #C0C0C0; }
   > .tablepress tbody td {
   >  font-family: Trebuchet; font-size: 12px; color: #000000;
   > line-height: 100%; border: none; padding: 0; }
 * I wrote : padding: 0… so how can i do less than 0 ? 🙂
    I can manage with my 
   table like that. It’s “good enough”, but i’d like to reduce “line height” a little
   bit (biggest icon is 15px high). byebye
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css-tablepress-1/#post-5020502)
 * Hi,
 * same problem as above, just add `!important`, i.e. try
 *     ```
       padding: 2px !important;
       ```
   
 * Regards,
    Tobias

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

The topic ‘CSS & Tablepress’ 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/)

 * 5 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/css-tablepress-1/#post-5020502)
 * Status: resolved