Data table responsive and formatting grid and heading bold with autofit columns

This topic has 6 replies, 2 voices, and was last updated 2 months, 4 weeks ago ago by Luca Rossi

  • Avatar: khurram virk
    khurram virk
    Participant
    June 13, 2024 at 23:26

    dear sir

    good day to you!

    we hope you will be fine, please let us how to make the following table responsive, put grids, auto column fit, column heading bold.

    here is the link
    http://bullrope.co.uk/product/k-8x36ws-14-77-7-1iwrc-steel-wire-rope/

    mobile view
    https://snipboard.io/FpRSQ7.jpg

    desktop view
    https://snipboard.io/aOINmD.jpg

    please help us to achieve this.

    thank you for as usual support.

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    June 14, 2024 at 06:26

    Hi @khurram virk,

    Your table content is too long so it can’t fit the width. Solution is adding the scrollbar.

    Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

    
    div#tab-description {
        overflow-x: auto;
    }
    table thead th {
        font-weight: bold;
    }
    

    Hope it helps!

    Avatar: khurram virk
    khurram virk
    Participant
    June 14, 2024 at 18:16

    dear sir

    good day to you!

    thank you so much, highly appreciated… almost it is done.
    please let us know how to put the “grid cell lines” to read easily like in excel.

    http://bullrope.co.uk/product/k-8x36ws-14-77-7-1iwrc-steel-wire-rope/

    thank you sir.

    Avatar: Justin
    Luca Rossi
    Support staff
    June 15, 2024 at 07:54

    Hi @khurram virk,

    Please also add this custom CSS:

    div#tab-description table tr {
        padding: 10px;
        border: 1px solid grey;
    }
    div#tab-description table td,
    div#tab-description table th {
        border-left: 1px solid grey;
        padding-left: 10px;
    }
    

    https://prnt.sc/-NIco967cQ4b

    Hope it helps!

    Avatar: khurram virk
    khurram virk
    Participant
    July 13, 2024 at 12:21

    dear sir

    good day to you!

    thank you for providing the css code, it is almost done —requesting to you please provide code to make

    1) data centre align of both column and cell
    2) and auto justify width of all columns

    please find the attached screenshot both mobile and desk view.

    thank you.

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    July 13, 2024 at 16:12

    Hi @khurram virk,

    Please also add this custom CSS code to make the table content center:

    
    div#tab-description table td,
    div#tab-description table th {
        vertical-align: middle;
        text-align: center;
    }
    

    For the automatically adjust width, it’s NOT possible because your table is too long and the table also has the scrollbar at the bottom:

    https://prnt.sc/yv7joOhxuAtK

    Best Regards,
    The 8Theme Team.

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.