WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Center text in a floating td (6 posts)

  1. sscalifornia
    Member
    Posted 1 year ago #

    I haven't used tables too many times, in fact the only times that I've dealt with them is with your plugin, which is fantastic by the way.

    I have two columns which are floating apart from each other and I need them to have the text vertically centered on both but I can't figure it out. I looked all through this forum and Google and the answers I find don't seem to work for me.

    my css looks like this for these tables:

    td.column-1 {
    	float: left;
    	width: 357px;
    	height: 140px;
    	border: none !important;
    	color: #2E3092;
    	text-align: right !important;
    	font-size: 18px;
    	line-height: 120px;
    	padding-right: 23px !important;
    }
    td.column-2 {
    	float: right;
    	width: 631px;
    	height: 140px;
    	padding: 20px 25px 0px 25px !important;
    	font-size: 14px;
    	color: #939597;
    }
    .tablepress .odd td {
        background-color: #e6e7e8 !important;
    
    }
    .tablepress .even td {
        background-color: #edecec !important;
    	border: none !important;
    }

    Any thoughts would be greatly appreciated. I've tried vertical-align: middle so many times to no avail, I just think I'm missing something.

    P.S This is the starting code I had with line-height on the first td and padding on the second td. I don't want to use these, I'd rather just be able to center them vertically.

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

  2. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for your question, and sorry for the trouble.

    From what I can see, you are using float directly on the table cells. That's not really a good idea, as that can cause weird behavior. Table cells are not really made to "float". If you want that behavior, using <div> HTML elements is usually better.

    Now, to find some working code for you could you please post link to the page with the table, so that I can take a direct look?

    Regards,
    Tobias

  3. sscalifornia
    Member
    Posted 1 year ago #

    Thanks for getting back to me. Yeah, like I said, I don't have much experience using tables. Here's the link

    I needed the two columns to be separated and tried float and it did the trick so I stuck with it. If there's a better way to do that, I'm open to it. I tried vertical align without the floats and it still didn't work. Thanks for looking at it.

  4. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    thanks for the link!

    Please replace the current "Custom CSS" (except for the .odd and .even code, that should stay) with this table specific CSS:

    .tablepress-id-1 {
    	border-collapse: separate !important;
    	border-spacing: 20px 0 !important;
    }
    .tablepress-id-1 .column-1 {
    	width: 357px;
    	height: 140px;
    	font-size: 18px;
    	color: #2E3092;
    	text-align: right;
    	vertical-align: middle;
    	padding-right: 23px !important;
    }
    .tablepress-id-1 .column-2 {
    	font-size: 14px;
    	color: #939597;
    	vertical-align: middle;
    	padding: 20px 25px !important;
    }

    The border spacing will create that separation, without needing to use float.

    Regards,
    Tobias

  5. sscalifornia
    Member
    Posted 1 year ago #

    Wow! Thank you so much. This is just such an amazing plugin. I'm going to take you up on buying you a cup of coffee.

  6. TobiasBg
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    no problem, you are very welcome! :-) Good to hear that this helped!
    And thanks for the donation, I really appreciate it!

    Best wishes,
    Tobias

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.