WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. sscalifornia
    Member
    Posted 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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 10 months 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!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.