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

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

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

在此处输入图像描述

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

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

 width="100%" 

干得好:

 

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

 

在这里看演示