Styling not displaying on all tables

  • Resolved tannetoni

    (@tannetoni)


    6 years, 11 months ago

    Hello,
    I needed to style my tables to all look the same (I’ve copied the CSS below). I didn’t see a need to code the alternating row colors because all I needed to do was check the box in Admin and it would do it for me. However, I noticed that with the box checked, I’m not seeing the alternating colors. I even tried to add it in my CSS and still don’t see it.

    I decided to move on. Then I duplicated a table, changed the cell data, and placed two tables not the same page (link above). The top table displays correctly (except for alternating row colors) but the 2nd table does not show the 2nd row with the yellow background color as it should. These are 2 separate tables – and the 2nd table was a duplicate of the first – so I can’t figure out why the yellow background is not showing on the second row of the 2nd table. Please advise as to what I should do to clear this up.

    Thanks,
    Toni

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter tannetoni

    (@tannetoni)

    .tablepress {
    border: 2px solid #000000;
    }

    .tablepress tr,
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    border: 1px solid #000000;
    }

    .tablepress thead th,
    .tablepress tfoot th {
    font-size: 24px;
    font-family: ‘Oswald’;
    background-color: #000000;
    color: #ffffff;
    }

    .tablepress tr.row-2 {
    font-size: 24px;
    font-family: ‘Oswald’;
    font-weight: bold;
    background-color: #ffd200;
    color: #000000;
    }

    .tablepress th.column-1,
    th.column-2,
    th.column-3,
    th.column-4,
    th.column-5,
    th.column-6 {
    text-align: center;
    }

    .tablepress td.column-1,
    td.column-2,
    td.column-3,
    td.column-4,
    td.column-5,
    td.column-6 {
    text-align: center;
    }

    .tablepress tr.row-3,
    tr.row-4,
    tr.row-5,
    tr.row-6 {
    font-size: 20px;
    font-family: ‘Open Sans’, sans-serif;
    }

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Please uncheck the “Use DataTables” checkbox for the tables 4 and 5. These interfere here, as you are using combined cells.

    Then, please also change the code

    .tablepress tr.row-2 {
  font-size: 24px;
  font-family: "Oswald";
  font-weight: bold;
  background-color: #ffd200;
  color: #000000;
}

    to

    .tablepress tr.row-2 td {
  font-size: 24px;
  font-family: "Oswald";
  font-weight: bold;
  background-color: #ffd200;
  color: #000000;
}

    You can then also shorten

    .tablepress th.column-1,
th.column-2,
th.column-3,
th.column-4,
th.column-5,
th.column-6 {
  text-align: center;
}

.tablepress td.column-1,
td.column-2,
td.column-3,
td.column-4,
td.column-5,
td.column-6 {
  text-align: center;
}

    to

    .tablepress thead th,
.tablepress tbody td {
  text-align: center;
}

    Finally, please change

    .tablepress tr.row-3,
tr.row-4,
tr.row-5,
tr.row-6 {
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
}

    to

    .tablepress .row-3 td,
.tablepress .row-4 td,
.tablepress .row-5 td,
.tablepress .row-6 td {
  font-size: 20px;
  font-family: "Open Sans", sans-serif;
}

    Regards,
    Tobias

    Thread Starter tannetoni

    (@tannetoni)

    Hi Tobias,

    Thanks! This fixed it right up!!

    Best,
    Toni

    Plugin Author TobiasBg

    (@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 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling not displaying on all tables’ is closed to new replies.