Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1303229

    Hello Enfold Team,

    I’m having a few customization issues regarding the table.

    First, I want to define the width of the column to be 1/3 of the table width.

    Next, I want to make each cell in the first column a different colour (like in the attached image).

    I’ve tried suggestions from a few different threads to no avail.

    Thanks!
    Em

    • This topic was modified 3 years, 5 months ago by Saskbison.
    #1303546

    Hey Saskbison,

    Thank you for the inquiry.

    This should adjust the width of the first column.

    #custom-table-1 tbody tr td:nth-child(1) {
    	vertical-align: middle !important;
    	width: 30%;
    }

    To change the color of the cell in each row, try this css code.

    #top #custom-table-1 tbody tr:nth-child(1) td:nth-child(1) {
    	background-color: red !important;
    }
    
    #top #custom-table-1 tbody tr:nth-child(2) td:nth-child(1) {
    	background-color: green !important;
    }
    
    #top #custom-table-1 tbody tr:nth-child(3) td:nth-child(1) {
    	background-color: blue!important;
    }
    

    We used the nth-child selector to target each table row (tr) element.

    Best regards,
    Ismael

    #1303644

    Perfect! Works exactly how I need it to.

    Thank you for your help, Ismael!
    Emily

    #1303856

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Table columns custom colored cells’ is closed to new replies.