WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Make Table Width Smaller (12 posts)

  1. FEleazer
    Member
    Posted 1 year ago #

    I would like to make the size of this table smaller. I have read and followed your advice to a number of different users, with no luck. I'm guessing it's something in my theme, but I don't know how to figure that out. Here's the code I've added:

    .tablepress thead th,
    .tablepress tfoot th {
    	background-color: #BDCEF4;
    }
    .tablepress th,
    .tablepress td {
    	text-align: center;
    	padding: 2px;
    }
    .tablepress-id-1 {
    	width: auto;
    }
    .tablepress-id-1 .column-1 {
    	width: 100px;
    }
    .tablepress-id-1 .column-2 {
    	width: 75px;
    }
    .tablepress-id-1 .column-3 {
    	width: 75px;
    }

    On the Width: auto line "auto" is in red, indicating it's not an available choice? Same for "center". I tried typing a number in, but that didn't change the size of the table either. I just want the table columns to be closer in size to the contents, and not have so much white space. Also, to line up with the size of the doc embedded above it.

    Another weird thing is that when I open the custom css window, the lines under "width: auto" are not visible until I click somewhere and make a change (like delete a space or something). Not really affecting my code, but it's some kind of glitch. Using Firefox.

    My table is on this page: http://palmettoskateclub.com/calendar/freestyle-schedule/

    Thanks in advance for your help!
    Fran

    http://wordpress.org/extend/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Fran,

    thanks for your post, and sorry for the trouble!

    You are right, your theme also contains some CSS code that influences the table, and especially the width. To change that, we'll just have to raise the priority of your CSS, and actually just for one line. Please replace

    .tablepress-id-1 {
    	width: auto;
    }

    with

    #wrapper .tablepress-id-1 {
    	width: auto;
    }

    That should make your table more narrow, and the table will then obey the individual column widths that you are setting.

    And don't worry too much about the color of the strings, like "auto" or "center". This is supposed to be some sort of help on the syntax of the code, but unfortunately, the external JavaScript library that is used for this does not know all possible strings in all contexts of where they can be used. So, basically, you can ignore the coloring of these words. They do not influence the code in any way.
    And I've also noticed that glitched with the lower lines of text in that field not being visible until clicking into the textfield. This is also related to that external JS library, and I hope that it will be fixed in one of the next releases of that library.

    Regards,
    Tobias

  3. FEleazer
    Member
    Posted 1 year ago #

    Tobias, that is perfect!
    (...and boy are you FAST!)

    Is there a simple way that you can tell me how you found the #wrapper id was the culprit? I use several different WooThemes, and I imagine they will all have a similar problem. Your plugin is good and I'm sure I'll need it again, I'd like to be able to troubleshoot without bothering you again.

    I'll be sure to rate the plugin, and contribute to your efforts via PayPal. :)
    Thanks again.
    Fran

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Fran,

    great to hear that this worked! :-)

    Well, technically it's not the #wrapper that was missing. It just comes in handy when we want to give our CSS precedence over the theme CSS.

    To find this, I use the Developer Tools in Google Chrome. With that, I saw that the theme CSS has the priority. Usually, it is then enough to just use the same CSS selector as the theme, but with our desired values. As the CSS selector here is rather complex, I decided to use a simpler one, and (again with the Developer Tools) I found that the #wrapper will work nicely, as it is a CSS element that is part of every page of your site, and that has a higher priority.

    A similar method would have been to use the !important keyword, as in

    .tablepress-id-1 {
    	width: auto !important;
    }

    That would also have given priority to our CSS command, over that of theme.

    And thanks for wanting to donate, I really appreciate it!

    Best wishes,
    Tobias

  5. Siebren
    Member
    Posted 4 months ago #

    Hi Tobias,

    I can not get my 4th column in the good width... Also how do I get the table located in the center beneath the text? With the normal tool of wordpress I can not get this done!

    My url is: http://www.reclamelangsderails.nl

    Thanks in advance!

  6. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    There's a small typo in your CSS. Also, you should add the table ID to the CSS selector, so that it only affects one table at a time.
    Please change this

    .tablepress-id-1 {
    	width: auto !important;
    }
    
    .tablepress .column-1 {
    	width: 100px;
    }
    
    .tablepress .column-2 {
    	width: 100px;
    }
    
    .tablepress .column-3 {
    	width: 100x;
    }
    
    .tablepress .column-4 {
    	width: 100x;
    }

    to

    .tablepress-id-1 {
    	width: auto !important;
    	margin: 0 auto 1em;
    }
    .tablepress-id-1 .column-1,
    .tablepress-id-1 .column-2,
    .tablepress-id-1 .column-3,
    .tablepress-id-1 .column-4 {
    	width: 100px;
    }

    Regards,
    Tobias

  7. JGravesNBS
    Member
    Posted 4 months ago #

    Hi socialsparkmedia

    What plugin are you using for:

    Freestyle Schedule and Club Calendar

    http://palmettoskateclub.com/calendar/freestyle-schedule/

  8. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi,

    from what I can see, that's simply an embedded Google Calendar, from http://calendar.google.com .

    Regards,
    Tobias

  9. JGravesNBS
    Member
    Posted 4 months ago #

    Fantastic!

  10. TobiasBg
    Member
    Plugin Author

    Posted 4 months ago #

    Hi,

    good to hear that this helped!

    Regards,
    Tobias

  11. mijumoto
    Member
    Posted 2 months ago #

    Hi Tobias,

    Can you take a look at this one and tell me what's wrong

    Your efforts will be remunerated, have spent a lot of time with this already

    Thanks

    Mike

  12. TobiasBg
    Member
    Plugin Author

    Posted 2 months ago #

    Hi Mike,

    thanks for your post.
    I'm a little bit confused though. What do you want me to take a look at? Did you maybe want to post a link?

    Regards,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic