使用jQuery调整HTML表格单元格宽度

时间:2012-06-12 09:30:37

标签: jquery html css

我有HTML表格,如下所示。它有七列。我正在使用jQuery调整表格单元格宽度。 jQuery中的总百分比为100。但是,桌子没有占据整个空间;有一些未使用的空间。如何纠正这个?

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%');
            }


        }
 );


    }
);

3 个答案:

答案 0 :(得分:3)

将以下属性添加到表元素中。

width="100%"

答案 1 :(得分:0)

你走了:

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

答案 2 :(得分:0)

仅在下方使用内联css将宽度设置为100%

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

See demo here