Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 3, 2022 at 9:51 am #1353999
    whdsolutions

    I have tried multiple attempts to get this to work based on your supports previous requests – but I can’t.

    We need the columns to be:

    Column #1 = 22%
    Column #2 = 58%
    Column #3 = 20%

    June 4, 2022 at 2:52 am #1354089
    Ismael

    Hey whdsolutions,

    Thank you for the inquiry.

    Try to use this css code to adjust the width of the columns in the table with the unique ID (UID) av-tm6a-293684b59095412a37110c873b903ed6.

    .av-tm6a-293684b59095412a37110c873b903ed6 table tbody tr td:nth-child(1) {
    width: 22%;
}

.av-tm6a-293684b59095412a37110c873b903ed6 table tbody tr td:nth-child(2) {
    width: 58%;
}

.av-tm6a-293684b59095412a37110c873b903ed6 table tbody tr td:nth-child(3) {
    width: 20%;
}

    You can also apply a custom css class name or ID to the table element and replace the autogenerated UID.

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    June 4, 2022 at 9:12 am #1354117
    Guenni007

    i do not see your table but if there are headings on it – do not forget to style them too:

    .custom-class table tbody tr td:nth-of-type(1),
.custom-class table thead tr th:nth-of-type(1) {
    width: 22% !important;
}
.custom-class table tbody tr td:nth-of-type(2),
.custom-class table thead tr th:nth-of-type(2) {
    width: 58% !important;
}
.custom-class table tbody tr td:nth-of-type(3),
.custom-class table thead tr th:nth-of-type(3) {
    width: 20% !important;
}

    PS : there are no other elements in between – so nth-child( ) will do the job too !
    And: on enfold demo page i see that the headings are sometimes in tbody ( not thead ) too – then it will be:
    .custom-class table tbody tr th:nth-of-type(x)

    June 6, 2022 at 9:57 am #1354283
    whdsolutions

    Nothing here worked

    June 6, 2022 at 11:38 am #1354287
    Guenni007

    But you thought of setting the custom-class as well? how it is named is up to you.
    Otherwise i would need to see the page – if you could send me the link, I will look for a solution. Just keep in mind that I can not see the private content fields.

    June 8, 2022 at 5:04 am #1354471
    Nikko

    Hi whdsolutions,

    Is this already fixed? I have checked the link and it seems to be working properly with this code:

    tr th:first-child, tr td:nth-child(1) {
  width: 20%;
  vertical-align: middle;
  font-size: 15px;
  color: #2d4f76;
}

tr th:first-child, tr td:nth-child(2) {
  width: 58%;
  vertical-align: middle;
  font-size: 15px;
  color: #2d4f76;
}

tr th:first-child, tr td:nth-child(3) {
  width: 22%;
  text-align: center;
  vertical-align: middle;
  font-size: 17px;
  font-weight: bold;
  color: #2d4f76;
}

    The code however is global and could affect tables on other pages, I would suggest you target the specific table using ID (#av-tm6a-293684b59095412a37110c873b903ed6).

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.