How To Center Text in a Table Cell

  • Resolved Rich

    (@rpm765)


    3 years, 1 month ago

    How can I get the numbers in column 1 (Project No.) to center? I have some css in the theme to set the width of that column, but I cannot figure out how to center the text. Here’s the code already in the theme for that first column:

    }
    td.3d_index {
    width: 5%;
    }

    I changed it to this:

    td.3d_index {
    width: 5%;
    align-content: center;
    }

    But it did not do anything to the text.

    Thanks ahead of time!

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Leeberty

    (@aaronvincentlee)

    3 years, 1 month ago

    Hi Rich,

    Can you please try this CSS out?

    table.dataTable.wpda-datatable td.wpda_format_number{

    text-align: center !important;

    }

    Let us know how it goes for you. 🙂

    Thread Starter Rich

    (@rpm765)

    3 years, 1 month ago

    Thanks for the suggestion, but it did not work. It showed an error in the css. Also, I’m just trying to center the text in the first column, not all the columns in the table.

    Plugin Contributor Kim L

    (@kimmyx)

    3 years, 1 month ago

    Hi Rich,

    Thanks for the response.

    Can you try the following instead (just add the text-align line after your width adjustment):

    td.3d_index {
width: 5%;
text-align: center !important;
}

    Hope this helps!

    Thread Starter Rich

    (@rpm765)

    3 years, 1 month ago

    I added that css as you suggested, Kim. Still no joy.

    I have a lot of extra css in the theme to format the tables the way I want them to look. Perhaps there is some conflicting code there preventing this from working? I also note that changing the width percentage in the 3d_index column does nothing. If I change it in any of the other columns, it DOES change the look of the table.

    Here’s the CSS that’s in there:

    table.wpda-datatable thead th,
    table.wpda-datatable tfoot th {
    background-color: #095599 !important;
    color: white !important;
    border: 1px solid #095599 !important;
    }

table.wpda-datatable {
    background: #ffffff !important;
    border: 1px solid #095599 !important;
    }

table.wpda-datatable tbody td {
    border: 1px solid #095599 !important;
    }

/* This turns off the footer for the WP Data Access tables. */

.wpda-datatable tfoot {
    display: none;
    }

td.3d_index {
    width: 5%;
    text-align: center !important;
    }

td.description {
    width: 20%;
    }

td.img1 {
    width: 30%;
    }

td.img2 {
    width: 30%;
    }
    td.forum_link {
    width: 15%;
    }

/* This sets the theme top bar menu to full width */
    .topclass .kad-topbar-right,
    .topclass .kad-topbar-left {
    width: 100%;
    }

/* Removes the default 100% table width in the Virtue theme.*/
    body .entry-content table {
    width: unset;
    max-width: unset;
    }

    Thanks again for the help.

    • This reply was modified 3 years, 1 month ago by Rich.
    • This reply was modified 3 years, 1 month ago by Rich.
    Plugin Contributor Kim L

    (@kimmyx)

    3 years, 1 month ago

    Hi Rich,

    Thanks for the response and for the additional information!

    I realized your class name starts with a number. This is generally not allowed for CSS identifiers (ids, classes, etc.) More information here: WRC Specifications

    If you’re unable to amend the class name, can you try the following instead? This will target the first td of each row in a table:

    td:first-child {
  text-align: center;
}

    If it still doesn’t work, can you try renaming your table as well as your index column (if possible)?

    Let us know how it goes!

    Thread Starter Rich

    (@rpm765)

    3 years, 1 month ago

    THAT DID IT! The “first-child” language did the trick. The first column is now responding to the code properly.

    You guys are amazing. Thanks so much – AGAIN!

    Thread Starter Rich

    (@rpm765)

    3 years, 1 month ago

    AN UPDATE: It worked TOO well!

    The “first-child” code changed the table width of ALL THE TABLES in the site, including tables that are not WP Data Access tables.

    I ended up changing the field name in the SQL database from “3d_index” to “project_no” and then making the appropriate changes in the plugin to access the renamed field in the WP Data Access table. That worked to change ONLY the single WP Data Access table where I needed to make this change. So now – FOR SURE – we’re all set.

    Thanks again!

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

The topic ‘How To Center Text in a Table Cell’ is closed to new replies.