asked on

padding not getting applied

-The text inside the table cells is too cramped. My attempt to add some padding is not working:
-Is it possible to HIDE the 3rd column?
-If a row already has Gray background, I do not want the hover effect to do anything (since the row is already selected). Right now if I hover over the row after it has been selected, it undoes the selection coloring.

http://jsfiddle.net/knowlton/E9BZb/5/

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Kiran Sonawane

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tom Knowlton

ASKER

Things are much improved.

But, the header padding is still not correct, and the selected row background still gets erased by the hover effect.

See my screencast.

My current jQuery code is here:

http://jsfiddle.net/knowlton/JZnw8/2/

One of the rows is highlighted, so you can test.

 $('table[id*="ShoppingShippingMethods1"] td').each(function ()
            {
                $(this).css("padding", "5px");
            });

            $('table[id*="ShoppingShippingMethods1"]').children().each(function ()
            {
                $('td').css("border", "1px solid black");
            });

            $('tr:gt(0)', 'table[id*="ShoppingShippingMethods1"]').hover(

                function ()
                {
                    $(this).css({
                        "background-color": "blue",
                        color: "white"
                    });
                }, function ()
                {
                    $(this).css({
                        "background-color": "white",
                        color: "black"
                    });
                });

            $("tr:eq(0)", 'table[id*="ShoppingShippingMethods1"]').css({
                "background-color": "grey",
                "color": "white"
            });

            $("td:last,th:last", 'table[id*="ShoppingShippingMethods1"] tr').hide()

ASKER

Here is your final version

http://jsfiddle.net/JZnw8/6/

Tom Knowlton

ASKER

It works on the jsfiddle site for sure.

But unfortunately, it does not work on the actual web page. I don't know why.

Kiran Sonawane

You need to open another question

Tom Knowlton

ASKER

thx