Customize Table

  • Resolved jamiwr

    (@jamiwr)


    7 years, 8 months ago

    I am trying to create a table based on a image that is above the current table. Can you help me get the right code to set this table?

    Site: https://moniquepowers.marketingbydata.com/eyebrow-tweezing-tinting/

    .tablepress thead th {
    font-family: geothe-gothic;
    font-size: 20px;
    color: #ffffff;
    }

    .tablepress .even td {
    background-color: #00ff00;
    }

    .tablepress-id-1 .column-3 {
    text-align: center;
    }

    .tablepress-id-1 tbody td {
    font-family: geothe-gothic;
    font-size: 14px;
    color: #5E3F2C;
    }

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #ff7396;
    }

    .tablepress thead .sorting:hover {
    background-color: #ffffff;
    }

    .tablepress-id-1 .row-2 td {
    background-color: #FEDCD9;
    }

    .tablepress-id-1 .row-2 td {
    background-color: #FEDCD9;
    }

    .tablepress-id-1 .row-3 td {
    background-color: #FEDCD9;
    }

    .tablepress-id-1 .row-4 td {
    background-color: #FEDCD9;
    }

    .tablepress-id-1 .row-5 td {
    background-color: #FEDCD9;
    }

    .tablepress-id-1 .row-6 td {
    background-color: #FEDCD9;
    }

    .tablepress-id-1 .row-6 td {
    background-color: #FEDCD9;
    }

    .tablepress-id-1 .row-7 td {
    background-color: #FEDCD9;
    }

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    This shorter “Custom CSS” should work here:

    .tablepress thead th {
  background-color: #ff7396;
  font-family: geothe-gothic;
  font-size: 20px;
  color: #ffffff;
}

.tablepress-id-1 tbody td {
  font-family: geothe-gothic;
  font-size: 14px;
  background-color: #FEDCD9;
  color: #5E3F2C;
  text-align: center;
}

    Note that the font you are choosing is not available on every computer, so you might want to choose a different one.

    Regards,
    Tobias

    Thread Starter jamiwr

    (@jamiwr)

    Thanks for the shortened code. It still looks like the table I had and not the one I am trying to achieve which is an image on the same page.

    A couple of issues:
    First column body should not be centered
    There are not any white lines between each cell
    Column 2 row 6 has spacing between lines
    Column 2 and 3 headers are not centered
    Column 2 and 3 are not bold text

    Please look at page and see image.

    Thanks,

    JW

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    sorry about that. I had assumed that this was only a rough example.
    Please try this new version:

    .tablepress thead th {
  background-color: #ff7396;
  font-family: geothe-gothic;
  font-size: 20px;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.tablepress-id-1 tbody td {
  font-family: geothe-gothic;
  font-size: 14px;
  background-color: #FEDCD9;
  color: #5E3F2C;
  border: 1px solid #ffffff;
  line-height: normal;
}
.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3 {
  text-align: center;
  font-weight: bold;
}

    Regards,
    Tobias

    Hi Hi, how can I compress below style so that it applies to all tables that I am creating?

    .tablepress-id-1 thead th,
    .tablepress-id-2 thead th,
    .tablepress-id-3 thead th,
    .tablepress-id-4 thead th {
    color: #ffffff;
    background-color: #242424;
    }

    .tablepress-id-1 .column-2,
    .tablepress-id-2 .column-2,
    .tablepress-id-3 .column-2,
    .tablepress-id-4 .column-2 {
    text-align: right;
    }

    .tablepress-id-1 .channeltv,
    .tablepress-id-2 .channeltv,
    .tablepress-id-3 .channeltv,
    .tablepress-id-4 .channeltv {
    color: #25aae1;
    }

    Instead of repeating the line “.tablepress-id-1 to 100” ??

    Thank you.

    Thread Starter jamiwr

    (@jamiwr)

    Thanks! That works.

    Thread Starter jamiwr

    (@jamiwr)

    Hey,

    How do i have a CTA button under column 2 and 3?

    Thread Starter jamiwr

    (@jamiwr)

    Any idea on how to add a CTA button under column 2 and 3?

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    sorry for the long delay. I was on holidays and could not reply earlier.

    For this, you should add a new row and then use #colspan# in the third cell, to merge the second and third cells of that new row. Then, insert the HTML code for your button/image into the second cell.

    Regards,
    Tobias

    Thread Starter jamiwr

    (@jamiwr)

    Thanks!

    Table looks great. The issue I am having now is that on mobile there is not any padding between the right and the table.

    How do I adjust the table padding?

    I have gone through all the FAQ’s and only found info around cell padding.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    this only happens when the table is wider than the available screen space.

    You could try to reduce the padding in the cells a bit, to gain space:

    .tablepress thead th,
.tablepress tbody td {
  padding: 8px;  
}

    If that’s not sufficient, you will have explore ideas for responsiveness, e.g. the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Customize Table’ is closed to new replies.