This topic has 6 replies, 2 voices, and was last updated 2 months, 4 weeks ago ago by Luca Rossi
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.
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!
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.
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;
}
Hope it helps!
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.
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:
Best Regards,
The 8Theme Team.
You must be logged in to reply to this topic.Log in/Sign up