• Resolved Nontouch

    (@nontouch)


    The more you work with table press the more questions come up.
    As I mentioned in another thread I have many tables on my site. Most of them will have the same dimensions, hence I’ve set the following custom CSS:

    .tablepress .column-1 {
    	width: 100px;
    }
    
    .tablepress .column-2 {
    	width: 100px;
    }
    
    .tablepress .column-3 {
    	width: 150px;
    }
    
    .tablepress .column-4 {
    	width: 100px;
    }
    
    .tablepress .column-5 {
    	width: 75px;
    }

    From the beginning I thought I would only use table press to create actual tables with number and text. Since I’m not very good at html nor CSS I started to use table press to align 3-4 images in the middle of the page. (for some reason my theme don’t do that automatically)

    My question is now, can I overrule my previous css-code for any specific table?

    I’ve tried:

    .tablepress-id-7 .column-1 .column-2 .column-3 .column-4 {
    	width: 150px;
    }

    But that didn’t seem to have any effect…

    Here is the url: http://casinoval.se

    The reason I see the problem is that one of the images becomes much larger than the other once… and I would prefer to make each image a bit larger.

    Thanks in advance

    https://wordpress.org/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Your general approach with the table ID specific selectors is correct, but the way how you merged the CSS is not. Please try

    .tablepress-id-7 .column-1,
    .tablepress-id-7 .column-2,
    .tablepress-id-7 .column-3,
    .tablepress-id-7 .column-4 {
    	width: 150px;
    }

    Regards,
    Tobias

    Thread Starter Nontouch

    (@nontouch)

    hi,
    Thanks for your quick answer! That did not make any difference. Nothing happened. Do you think that the previous .tablepress column-3 still affect the column width?

    I had

    .tablepress-id-7 {
    	width: auto;
    	margin: 0 auto 1em;
    }

    activated before. When I deactivated that code the table became larger, but the image in the third column is still much bigger than the others despite the fact that is exactly the same image as in column 4.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    yes, the .tablepress column-3 is being used here as that comes later in the file.
    The order basically has to be from the general CSS down to the more specific CSS.

    Regards,
    Tobias

    Thread Starter Nontouch

    (@nontouch)

    Aha,
    so it matter where in the plugin options you put your code. It’s read like a book top down. It work when I put the code on the bottom of the page. =)

    Thanks

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    correct, the browser will apply it from the top to the bottom, and if there are CSS declarations with the same priority (like in this example), the last one wins.

    Best wishes,
    Tobias

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

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

The topic ‘Column width’ is closed to new replies.