Return to previous page

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

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

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.

#399698 Copied Theme version: 9.3.12

5 Answers
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!
#399718 Copied
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.

#399862 Copied
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!
#399912 Copied
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.

#404516 Copied
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.
#404564 Copied
Tagged: autofit column woocommerce templates, bold heading wordpress templates, formatting grid woocommerce, responsive datatable woocommerce, wordpress responsive table templates
Viewing 6 results - 1 through 6 (of 6 total)