Question

Intro

Hi there,

I have a table made with lists <ul> that looks like this.

As you can see, I have added getMaxLiWidth() to achieve the biggest <li> width for all.

Before

#|Name|Extra

1|This is a very big name|Extra

What I want

#|Name                                      |Extra

1|This is a very big name|Extra

What I get

#                                      |Name                                      |Extra

Question

How do I need to change my getMaxLiWIdth() to get the max width for each “column”?

Answer 1

You need to set the css for all the list items in the widest column. First you have to identify the widest column, then return it with the max width, then use it as part of the selector.

function getMaxLiWidth() {
    var maxWidth = 0;
    var column = 0;
    $('li').each(function() {
        if (this.offsetWidth > maxWidth) {
            maxWidth = this.offsetWidth;
            column = $(this).index();
            console.log(column);
        }
    });
    return [maxWidth,column];
}

$(function() {

    var arr = getMaxLiWidth();
    $('li:nth-child(' + (arr[1] + 1) + ')').each(function() {
        $(this).css({
            'width': arr[0]
        });
    });
});

Here is a demonstration: http://jsfiddle.net/Dcd7R/2/