在表格中,若指定部分列的宽度绝对值,某些列使用*来自动调整,若列的宽度绝对值之和大于表格的宽度时候,会导致*列的显示异常。
本脚本修正以上显示方式。
/** * @copyright vaalhaai.org * * <pre> * vaalhaai table css amendment * base on jQuery 1.3.2 * * @author: Jimmy.Shine <Jimmy.Shine@Gmail.com> * @version: 1.0 * @date : Nov 30,2009 * @description: If the table-layout is fixed,if the table width is less than the sum of col widths, * the define of col='*' will had no width,so we set a fixed width='?' instead of it. * @testFor: IE 7,8; Firefox 3.5; Opera10.10; Safari 4 * </pre> */ (function($){ // Define object $.fn.tableCssAmendment = function(options){ // jquery extend to define default settings. this.settings = $.extend({ starColWidth: 100 }, options || {}); if(isNaN(this.settings.starColWidth)){ alert("Member starColWidth must typeof Number"); return; } reTable = $(this).filter("table"); var colsWidth = 0; var colStarCount = 0; var cols = reTable.children("colgroup").children("col").each(function(index){ if ($(this).attr("width") == "*" || $(this).attr("width") == "" || $(this).attr("vaalhaai_rewidth")) { colStarCount++; } else { colsWidth += parseInt($(this).attr("width")); } }); if (colStarCount > 0) { var percent = 100 / colStarCount; reTable.children("colgroup").children("col").each(function(index){ if ($(this).attr("width") == "*" || $(this).attr("width") == "" || $(this).attr("vaalhaai_rewidth")) { $(this).attr("width", percent + "%").attr("vaalhaai_rewidth", true); } }); } if (colsWidth >= reTable.parent().width()) { reTable.width(reTable.width() + colStarCount * this.settings.starColWidth); } else { reTable.width(reTable.width()); } return this; }; })(jQuery);