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 5 months ago ago by Luca Rossi

  • Avatar: khurram virk
    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
    Avatar: khurram virk
    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
    Avatar: Justin
    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
    Avatar: khurram virk
    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
    Avatar: Justin
    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
    Avatar: khurram virk
    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
    Avatar: khurram virk
    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
    Avatar: Justin
    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"><span style="color: #000000;"><strong>Item Code</strong></span></td>
<td width="129"><span style="color: #000000;"><strong>Working Load Limit</strong></span></td>
<td width="156"><span style="color: #000000;"><strong>Breaking  Load</strong></span></td>
<td width="103"><span style="color: #000000;"><strong>A±0.5</strong></span></td>
<td width="103"><span style="color: #000000;"><strong>B±1.5</strong></span></td>
<td width="103"><span style="color: #000000;"><strong>D±1.5</strong></span></td>
<td width="103"><span style="color: #000000;"><strong>H±1</strong></span></td>
<td width="103"><span style="color: #000000;"><strong>L±2</strong></span></td>
<td width="103"><span style="color: #000000;"><strong>E±2</strong></span></td>
<td width="103"><span style="color: #000000;"><strong>Weight</strong></span></td>
</tr>
...
</tbody>
</table>
</div>

    Hope it helps!

    #421090 Copied
  • Viewing 8 results - 1 through 8 (of 8 total)

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

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Minimal Store – WordPress WooCommerce Theme
lazy-placeholder
Organic Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Boxed Store – WooCommerce Theme
lazy-placeholder
Phone Service – WordPress WooCommerce Theme
lazy-placeholder
Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Marseille 02 – WordPress WooCommerce Theme
lazy-placeholder
Sport Store – WordPress WooCommerce Theme
lazy-placeholder
Kids Toys Store – WordPress WooCommerce Theme
lazy-placeholder
Beauty – WooCommerce Theme
lazy-placeholder
Sneakers Store – WordPress WooCommerce Theme

See All Templates

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