Return to previous page

Table content is not showing centre aligned and width of columns auto justified

This topic has 8 replies, 2 voices, and was last updated 3 weeks, 3 days ago ago by Luca Rossi

khurram virk

Participant

October 18, 2024 at 11:34

dear sir

good day to you!

we hope you will be fine, code was provided by you earlier. we are not getting the content of all cell’s centred aligned and width of columns not showing auto justify on all product pages.

****sample product page link
https://safeandsecureksa.com/product/clevis-sling-hook/

*****here is the code
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;
}
div#tab-description table td,
div#tab-description table th {
vertical-align: middle;
text-align: center;
}

***screenshot attachments —please find.

please help to get the desired result.

thank you

Files is visible for topic creator and
support staff only.

#419379 Copied Theme version: 9.4.2

7 Answers

khurram virk

Participant

October 18, 2024 at 11:44

Respected Sir

the table is not showing horizontal bar — i mean not responsive in mobile view —please check thank you.

https://safeandsecureksa.com/product/clevis-sling-hook/

Files is visible for topic creator and
support staff only.

#419381 Copied

Luca Rossi

Support staff

October 19, 2024 at 07:44

Dear Khurram Virk,

We hope this message finds you well.

We have reviewed the custom CSS codes, and they appear to be correct. However, in order to assist you further and conduct a more detailed review, could you kindly provide us with access to your admin account?

Thank you for your cooperation.

Best regards,
The 8Theme Team

#419479 Copied

khurram virk

Participant

October 29, 2024 at 19:27

dear sir

good day to you!

PC

thank you

Please contact administrator
for this information.

#420921 Copied
Luca Rossi

Support staff

October 30, 2024 at 08:22
Dear Khurram Virk,

We hope this message finds you well.

We are currently unable to add the custom CSS codes due to restrictions imposed by the firewall plugin (please see the screenshot for reference: [https://prnt.sc/u493S_UQCMfq](https://prnt.sc/u493S_UQCMfq)).

Could you kindly add the following custom CSS codes under **XStore > Theme Options > Theme Custom CSS > Global 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;
}
div#tab-description table td,
div#tab-description table th {
 vertical-align: middle;
 text-align: center;
}

div#tab-description {
 max-width: 100%;
 overflow-x: scroll;
}
```
BTW: The website speed optimization falls outside the scope of our standard support services. However, if you require personalized customization, we encourage you to submit a request through our customization panel, which can be accessed via the following link: https://www.8theme.com/account/#etheme_customization_panel. This will enable you to work directly with our technical team.

Please be aware that customization services may incur additional charges. The exact cost will be determined after a thorough review of your specific request.

Thank you for your understanding and attention to this matter.

Best regards,
The 8Theme Team.
#420946 Copied
khurram virk

Participant

October 30, 2024 at 17:39

dear sir

good day to you!

thank you so much for customization services. we will be happy to contact you on this soon.

Please contact administrator
for this information.

#421063 Copied

khurram virk

Participant

October 30, 2024 at 18:06

dear sir

thank you for code, the whole page is moving —only table should be moved.

here is the screenshot

https://snipboard.io/y2wVpz.jpg

https://safeandsecureksa.com/product/clevis-grab-hook/

thank you

#421064 Copied
Luca Rossi

Support staff

October 31, 2024 at 05:35
Hi @khurram virk,

Please delete this custom CSS code:
```
div#tab-description {
 max-width: 100%;
 overflow-x: scroll;
}
```
Then add this custom CSS code:
```
div#tab-description div.table {
 overflow-x: auto;
}
```
We’ve also wrapped your table with a div:
```
<div class="table">
<table width="1109">
<tbody>
<tr>
<td rowspan="2" width="103">Item Code</td>
<td width="129">Working Load Limit</td>
<td width="156">Breaking  Load</td>
<td width="103">A±0.5</td>
<td width="103">B±1.5</td>
<td width="103">D±1.5</td>
<td width="103">H±1</td>
<td width="103">L±2</td>
<td width="103">E±2</td>
<td width="103">Weight</td>
</tr>
...
</tbody>
</table>
</div>
```
Hope it helps!
#421090 Copied
Viewing 8 results - 1 through 8 (of 8 total)