Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 6, 2018 at 8:33 am #993832
    capuchin

    Hi !

    I am busy with a custom table and the only thing missing is the correct padding. Can you please help?
    The padding should be similar to the padding between the td cells. But on the outside. So that the transparent background
    is a bit bigger.

    .avia-table.tbl_xscape { 
border: none !important; 
background-color: rgba(255, 255, 255, 0.7) !important;
}

.main_color tr:nth-child(even) {
color: #2b2b2b;
}

.avia-table.tbl_xscape th,
.avia-table.tbl_xscape td,
.avia-table.tbl_xscape tr {
background-color: transparent !important; 
border: none !important; 
text-align: left !important;
}

    Thank you in advance.

    Kind regards
    capuchin

    August 6, 2018 at 1:26 pm #993914
    Mike

    Hey capuchin,
    Please try adding this css:

    .avia-table.tbl_xscape tr:nth-child(1) td:nth-child(1) {
    padding-top: 40px;
    padding-left: 40px;
}
.avia-table.tbl_xscape tr:nth-child(1) td:nth-child(2) {
    padding-right: 40px;
}
.avia-table.tbl_xscape tr:nth-child(2) td:nth-child(1) {
    padding-bottom: 40px;
    padding-left: 40px;
}
.avia-table.tbl_xscape tr:nth-child(2) td:nth-child(2) {
    padding-right: 40px;
}

    Best regards,
    Mike

    August 6, 2018 at 4:06 pm #993972
    capuchin

    Thank you, Mike! Quick response and it works.

    I would like to keep the padding ‘default’ or give it a 5px padding for mobile/responsive view.
    How will the code look then?

    @media only screen and (max-width: 767px)
    @media only screen and (max-width: 1140px)

    Kind regards
    capuchin

    August 6, 2018 at 4:11 pm #993978
    Yigit

    Hi,

    You can use the code as following 

    @media only screen and (max-width: 767px) { 
.avia-table.tbl_xscape tr:nth-child(2) td:nth-child(2) {
    padding-right: 40px;
}
}

    Cheers!
    Yigit

    August 6, 2018 at 8:50 pm #994083
    capuchin

    Thank you guys! So happy with the result, the table looks great on all devices now.

    Kind regards
    capuchin

    August 6, 2018 at 8:57 pm #994090
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘table padding quick css’ is closed to new replies.