Support » Plugin: TablePress » CSS not working

  • Resolved ChecMark

    (@checmark)


    I have spent hours following every instruction and reading pretty well every support forum thread but I cannot figure out why only some of the CSS is working. I also couldn’t find anywhere to style borders. About the only thing working is the alternating row colors. This is my current CSS:

    .tablepress-id-2 tbody td {
    text-align: left;
    font-size: 12px;
    border-radius: 2px;
    border-top: 3px;
    border-bottom: 3px;
    }

    .tablepress .column-1 {
    width: 200px;
    }

    .tablepress .column-2 {
    width: 40px;
    }

    .tablepress .column-3 {
    width: 200px;
    }

    .tablepress-id-2 .odd td {
    background-color: #f7f6c9 !important;
    }

    .tablepress-id-2 .even td {
    background-color: #ece876 !important;
    }

    .tablepress-id-2 .row-hover tr:hover td {
    background-color: #ff0000;
    }

    .tablepress-id-2 .column-2 {
    padding: 0;
    }

    Appreciate any help.

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

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

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Most of these seem to be working, from what I can see? Please try this updated version to see more things working:

    .tablepress-id-2 tbody td {
    	text-align: left;
    	font-size: 12px;
    	border-top: 3px solid #ff0000 !important;
    }
    
    .tablepress-id-2 .column-1 {
    	width: 200px;
    }
    
    .tablepress-id-2 .column-2 {
    	width: 40px;
    }
    
    .tablepress-id-2 .column-3 {
    	width: 200px;
    }
    
    .tablepress-id-2 .odd td {
    	background-color: #f7f6c9;
    }
    
    .tablepress-id-2 .even td {
    	background-color: #ece876;
    }
    
    .tablepress-id-2 .row-hover tr:hover td {
    	background-color: #ff0000;
    }
    
    .tablepress-id-2 .column-2 {
    	padding: 0;
    }

    Regards,
    Tobias

    Thank you for your incredibly quick response. I was able to do a few other styling things; however, the only thing I am struggling with now is trying to center the phone image. I’ve tried just about everything but the only thing that sort of works is this:

    although the align=”middle” does nothing.

    Not ideal and I wonder what it will do when people view the page on a phone?

    Ideally, I would like people to be able to click on the phone icon to dial the number they selected when they are viewing the page on their phone. I assume adding tel: with the number would do this.

    lol didn’t realize it would read the code. this is what I have used in the table with the brackets –

    (img style=”margin:0px 55px” src=”https://ajijictoday.com.mx/wp-content/uploads/2018/07/blue_cell_phone.png” alt=”” width=”34″ height=”34″ align=”middle” size-full wp-image-7136″ /)

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    a quicker way to center these images would be to use this CSS code:

    .tablepress-id-2 .column-2 img {
        display: block;
        margin: 0 auto!important;
    }

    To turn them into clickable links, you’d need to wrap them in a link:

    <a href="tel:123546789"><img ... /><a/>
    

    Regards,
    Tobias

    Worked like a charm! Thank you for your incredible support.

    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 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS not working’ is closed to new replies.