Product attribute table formatting in tabs on product page

Hi

Is anyone able to offer any suggestions to this?

Hi

That almost works but not quite …

http://screencast.com/t/n5GBQYqMssLJ

The text from the TD ends up underneath the wrapped text from the TH.

It is very close though.

I have tweaked the settings slightly but I cant seem to get the TH to always be above the TD.

Also how would I go about adding a border to this?

Hi

Thats almost fixed it however there are a couple of minor issues remaining …

The white has padding on the left but not on the right.

When a TH wraps, the TD clashes into it.

http://screencast.com/t/0rIavCLIy

I have tried increasing the min-width but if I increase the min-width on the TH, the TD starts further across.

Here is my code …

@media only screen and (max-width: 1000px) { div table.shop_attributes td {
    display: initial;
    position: relative;
    left: -200px;
}
div table.shop_attributes th {
    /* width: 225px; */
    min-width: 210px;
}
div table.shop_attributes td p {
    /* width: 76px; */
    min-width: 210px;
}}

Hi

This is how it looks on my iPhone …

http://screencast.com/t/92X9BwrT

Hi

Latest iOS 9.

Safari.

Hi

iPhone 5S.

I have tried deleting all browsing history etc in Safari and the text still overlaps.

http://screencast.com/t/HceJ2VZS8

Hi Yigit

That works pretty well however the font is more spaced out on the Specifications than it is on the other table tabs …

http://screencast.com/t/11R2vudQd6f

http://screencast.com/t/EyiIb8G2

ANDY

1) Yigit answered this. I am using this …

table.shop_attributes * {
    text-transform: capitalize;
}

But Capitalize isnt really the correct option. I want the font to appear as it is in the attributes. e.g. with dimensions, mm is correct but capitalize makes it Mm.

2) Thanks I used this recommended by Yigit, but it messes up the borders when viewed on a mobile

table.shop_attributes th, table.shop_attributes td {
    border: 1px solid #e2e2e2!important; 
} 

3) If you look at this, the table is sat centrally in the tab with grey down both sides

http://screencast.com/t/6MDU5b42M

However if you look at the specifications tab, there is a larger gap down the right of the table and the white continues to the right of the tab …

http://screencast.com/t/bzTmfDCZW2

1) Thanks
2) Ok
3) On WooCommerce tab manager, you assign attributes to a part and these attributes show up automatically in the Specifications tab. http://screencast.com/t/VBt9qFaaW0 http://screencast.com/t/M7dF4IQKxlVg

Hi

That almost fixed it.

The only issue now is the text is either touching the border or actually overlapping it when viewed on a mobile …

http://screencast.com/t/tbpEs45gs

Also on the larger iphone screens (such as the 6+ portrait) the table does not grow in width within the tab so there ends up being a larger grey section down the right of the table. I would have expected the table to grow within the tab.

http://screencast.com/t/m13TnHhj4UkP

• This reply was modified 9 years, 1 month ago by richardelectrix.

That doesnt seem to work …

This is my code for that section at present …

@media only screen and (max-width: 414px) { 
div table.shop_attributes td {
    display: initial;
    position: relative;
    left: -250px;
    top: 20px;
    text-align: center;
}
div table.shop_attributes th {
    /* width: 225px; */
    min-width: 250px;
    text-align: center;
    padding-top: 5px;
}
div table.shop_attributes td p {
    /* width: 76px; */
    min-width: 250px;
    text-align: center;
    padding-bottom: 10px;
}

table.shop_attributes tr {
    background: transparent!important;
}

table.shop_attributes * {
    max-width: 90%!important;
}

table.shop_attributes tr:nth-child(even) th {
    background: white;
}}

/* General changes */
table.shop_attributes th {
    border: 1px solid #e2e2e2!important; 
} 
@media only screen and (min-width: 414px) { 
table.shop_attributes td { 
    border: 1px solid #e2e2e2!important; 
}}

table.shop_attributes th {
    min-width: 200px;
}

table.shop_attributes * {
    text-transform: none;
    letter-spacing: 0.0px;
    /* text-align: center; */
}