Adjusting HTML Table Cell Width using jQuery

Question

I have HTML table as shown below. It has seven columns. I am adjusting the table cell width using jQuery. The total percentage is 100 in the jQuery. However, the table is not taking the complete space; there is some unused space. How to correct this?

http://jsfiddle.net/Lijo/eFS5J/3/

enter image description here

 $(document).ready(function () {


        $('#gridDiv').css('width', '630px');


        //Set width of table cells
        var numberOfColumns = 7;
        $('.resultGridTable th, .resultGridTable td').each(function (i) {


            $(this).css('background-color', (['Purple', 'Orange', 'Purple', 'Orange', 'Purple', 'Orange', 'Purple'][i % 7]));

            if (i % numberOfColumns == 0) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 1) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 2) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 3) {
                $(this).css('width', '15%');
            }
            if (i % numberOfColumns == 4) {
                $(this).css('width', '10%');
            }
            if (i % numberOfColumns == 5) {
                $(this).css('width', '15%');
            }

            if (i % numberOfColumns == 6) {
                $(this).css('width', '15%');
            }


        }
 );


    }
);

is there a reason why you want to do that in jquery and not css? — Andy
– Andy, Commented Jun 12, 2012 at 9:33
The problem is probably because the table itself has to be width:100% — Andy
– Andy, Commented Jun 12, 2012 at 9:34

Shawn Ang · Accepted Answer · 2012-06-12 09:33:45Z

3

Add the following attribute to your table element.

width="100%"

answered Jun 12, 2012 at 9:33

Shawn Ang

5387 silver badges21 bronze badges

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

Comments

TRR · Accepted Answer · 2012-06-12 09:38:46Z

0

Here you go:

<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTaxAssociates" style="border-collapse: collapse; width:100%;">

answered Jun 12, 2012 at 9:38

TRR

1,6434 gold badges26 silver badges43 bronze badges

Comments

Kalidasan · Accepted Answer · 2012-06-12 09:50:24Z

0

Only set width as 100% by using inline css in below place

<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdTaxAssociates"
                    style="border-collapse: collapse;width:100%;">

See demo here

answered Jun 12, 2012 at 9:50

Kalidasan

2773 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adjusting HTML Table Cell Width using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related