Control table width with Jquery issue

Question

I have a question regarding the IE7

I want to make every column of my table has the same width no matter what contents they have

 $("table").each(function(){
        var column =0;

        var totalWidth = $(this).width();
        $('tr:nth-child(1) td',this).each(function(){
            column ++;
        })

        var cellWidth = totalWidth / column;
        $('td', this).css('width', cellWidth);
    })

My codes work perfect on chrome and FF but not IE 7. I am not sure why. Can anyone help me about it? Thanks a lot!

What version of jquery are you using? jquery 2.x supports IE9+. jquery.com/browser-support — Dom
– Dom, Commented Aug 23, 2013 at 17:10
@Diodeus watermelons per second? I think you meant to say Gallaghers :) — Dom
– Dom, Commented Aug 23, 2013 at 17:14
@Diodeus I tried cellWidth +'px' but it is still not working. — FlyingCat
– FlyingCat, Commented Aug 23, 2013 at 17:16
you can just do var column = $('tr:first td',this).length; instead of looping and manually counting the columns — wirey00
– wirey00, Commented Aug 23, 2013 at 17:30

eterey · Accepted Answer · 2013-08-23 17:15:02Z

2

nth-child is CSS3 selector and does not supported by IE 7. Try something else.

answered Aug 23, 2013 at 17:15

eterey

4301 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Richard Over a year ago

is :first supported in IE7? This was the track I was going down, too. +1

meub Over a year ago

nth-child is supported as a jQuery selector though and will work in IE7 right?

eterey Over a year ago

Richard, yes, IE7 can work with ":first", but only if web-page has declarated doctype.

Tricky12 · Accepted Answer · 2013-08-23 17:15:16Z

1

Why don't you just put a class on all of your columns and then set it in CSS? That is just a waste of jQuery code.

<td class="col">...</td>

Then...

.col {
    width: 50px;
}

Or if you need it to be a certain percent of the page/table...

.col {
    width: 20%;   /* if 5 columns in the table, make each 20% of table width */
}

answered Aug 23, 2013 at 17:15

Tricky12

6,8301 gold badge30 silver badges36 bronze badges

1 Comment

FlyingCat Over a year ago

The problem is I have dynamic data and I don't know how many cell and what kind of contents I have.

AbstractChaos · Accepted Answer · 2013-08-23 17:15:57Z

1

Set the table's table-layout to

table-layout:fixed;

and provide a width shouldn't need jquery then

answered Aug 23, 2013 at 17:15

AbstractChaos

4,2111 gold badge21 silver badges28 bronze badges

1 Comment

FlyingCat Over a year ago

The problem is I have dynamic data and I don't know how many cell and what kind of contents I have.

Collectives™ on Stack Overflow

Control table width with Jquery issue

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related