I have an "additional information" table on my product pages that contains several rows of product attributes and their values. I have an "ingredients" attribute that can sometimes be very long, so I need the content of that cell to scroll if the content is higher than 35 pixels, for example. Magento doesn't add ID's to the table rows so I cant style that row in particular. I could live with a solution that affects all other attributes on that table as well.

I'm using the default template.

I've tried this:

table#product-attribute-specs-table.data-table tbody tr {
    max-height: 35px;
    overflow: scroll;

I see the style showing up on firebug but the row is still as tall as any content you put in it and no scrollbar ever shows up.

Any help would be appreciated. Thanks!


I think you can do this with javascript. Here is a small jQuery script that can do that:

jQuery('table#product-attribute-specs-table.data-table tbody tr').each(function(){
    if (jQuery(this)).height() > 35){
       jQuery(this).css('max-height'. '35px').css('overflow', 'scroll');
| improve this answer | |

Thanks everyone for the comments and replies.

Ok, solved this one myself. Let it be said that this fix is not update-proof, so if you apply it, it might go away on a future update. That being said, here's how you can do it:

First you have to modify the following file: */public_html/app/design/frontend/base/default/template/catalog/product/view/attributes.phtml*

and change this line:

<td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>

to this:

<td class="data"><div id="<?php echo $this->htmlEscape($this->__($_data['code'])) ?>"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></div></td>

This creates a div inside each data cell and assigns it an id equal to the attribute code. In mi case this generates a "div id="Size" since I'm dealing with the Size attribute.

Then you can style that div using the following style:

div#Size {
max-height:35px; overflow-y:scroll;

And that's it!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.