• Resolved affordable

    (@affordable)


    I have two tables, one for cruise ship suites for double occupancy rates and one for rooms with single-occupant rates.

    As long as row 1 and row 2 are the same color for both, I can do it. But, I need row 1 and row 2 for the single rate to be different colors than the double occupancy rate.

    I think the issue is that a table header can not be changed. Also, the table-id with row 1 has no affect at changing the table header.

    On the website, click on “Stateroom Pricing” to scroll down to the 2 pricing structures of this website: https://global.lifejourneys.net/abraham-hicks-pacific-coastal-2021/

    Here is my CSS:

    .tablepress thead th,
    .tablepress tfoot th {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-2 .row-1 td {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-2 .row-2 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-3 .row-1 td {
    	background-color: green;
    }
    
    table.tablepress-id-3 .row-2 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-4 .row-1 td {
    	background-color: green;
    }
    
    table.tablepress-id-4 .row-2 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-5 .row-1 td {
    	background-color: green;
    }
    
    table.tablepress-id-5 .row-2 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-6 .row-1 td {
    	background-color: green;
    	font-size: 18px;
    	font-weight: bold;
    	color: #ffffff;
    	text-align: center;
    }
    
    table.tablepress-id-6 .row-2 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-7 .row-1 td {
    	background-color: green;
    }
    
    table.tablepress-id-7 .row-2 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-8 .row-1 td {
    	background-color: green;
    }
    
    table.tablepress-id-8 .row-2 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-9 .row-1 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-9 .row-2 td {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-10 .row-1 td {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-10 .row-2 td {
    	background-color: #0c71c3;
    	font-size: 18px;
    	font-weight: bold;
    	color: #ffffff;
    	text-align: center;
    }
    
    table.tablepress-id-11 .row-1 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-11 .row-2 td {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-12 .row-1 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-12 .row-2 td {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-13 .row-1 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-13 .row-2 td {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-14 .row-1 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-14 .row-2 td {
    	background-color: #0c71c3;
    }
    
    table.tablepress-id-15 .row-1 td {
    	background-color: #005989;
    }
    
    table.tablepress-id-15 .row-2 td {
    	background-color: #0c71c3;
    }
    
    .tablepress {
    	width: auto;
    	margin: 0 auto 1em;
    }
    
    .tablepress .column-1 {
    	border: 1px solid white;
    	width: 60px;
    }
    
    .tablepress .column-2 {
    	border: 1px solid white;
    	width: 60px;
    }
    
    .tablepress .column-3 {
    	border: 1px solid white;
    	width: 60px;
    }
    
    .tablepress .column-4 {
    	border: 1px solid white;
    	width: 60px;
    }
    
    .tablepress .column-5 {
    	border: 1px solid white;
    	width: 60px;
    }
    
    .tablepress tbody td {
    	font-family: Tahoma;
    	font-size: 14px;
    	font-weight: bold;
    	color: #ffffff;
    	text-align: center;
    }
    
    .entry-content tr td,
    body.et-pb-preview #main-content .container tr td {
    	padding: 6px 4px !important;
    	border-top: 1px solid #eee;
    }
    
    .dataTables_paginate.paging_simple {
    	padding: 0 15px;
    	display: none;
    }
    
    .entry-content thead th,
    .entry-content tr th,
    body.et-pb-preview #main-content .container thead th,
    body.et-pb-preview #main-content .container tr th {
    	padding: 9px 24px;
    	color: #fff;
    	font-weight: 700;
    	font-family: Tahoma;
    	font-size: 14px;
    	text-align: center;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The HTML markup of the header row is slightly different: Here, th HTML tags are used and not td tags as for normal cells.
    To influence the header row, you would therefore need to use a syntax like

    .tablepress-id-123 thead th {
      ...
    }

    instead of that .row-1 td.

    Regards,
    Tobias

    Thread Starter affordable

    (@affordable)

    Thank you so much!!

    Plugin Author Tobias B?thge

    (@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 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Tablepress Row 1 Color’ is closed to new replies.