`
jimmy.shine
  • 浏览: 394902 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Table中定义列宽度为*时候问题修正

    博客分类:
  • Ajax
阅读更多

在表格中,若指定部分列的宽度绝对值,某些列使用*来自动调整,若列的宽度绝对值之和大于表格的宽度时候,会导致*列的显示异常。

本脚本修正以上显示方式。

/**
 * @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);
分享到:
评论

相关推荐

    Bootstrap Table列宽拖动的方法

    data-field属性用于标识该列对应的数据字段,而data-width属性则用于定义该列的初始宽度,以像素为单位。这种用法可以确保在页面加载时,列的宽度已经按照预设的数值显示。 然而,这种方法虽然可以预先设定列宽,但...

    Web前端开发试卷及答案.doc.docx

    9. **Firefox中居中问题**: Firefox中元素的居中可以通过设置`margin: 0 auto`实现,但需要确保元素的宽度已定义。 10. **XHTML与CSS的解释**: XHTML是XML与HTML的结合,增强了HTML的规范性;CSS则是为了分离内容与...

    div+css布局中常用方法汇总.docx

    6. **IE列表高度显示问题**:针对IE6中的列表显示问题,可以使用星号选择器`*html ul li`来设置`float`和`height`,以修正高度显示。 7. **a:hover与th:hover在IE6下的兼容**:`a:hover`在IE6及以下版本中必须包含...

    华农网页第一张

    在这个例子中,&lt;table&gt;定义了整个表格,定义了表格的一行,用于定义表头,而则用于定义表格的数据单元格。在实际应用中,&lt;table&gt;标签还可以结合其他属性,如border、cellpadding、cellspacing等,来调整表格的边框、...

    Oracle SQLPLUS命令的使用大全.doc

    例如,`SQL&gt; DESC table_name`将列出`table_name`表的所有列及其属性。 7. **列格式化(COL命令)** COL命令用于控制列的显示格式,包括标题、宽度、对齐方式和格式化模式。例如: - 改变列标题:`COLUMN ...

    latex-ctexfaq

    28. **中英文混排时为何无法正确分行?** - 在中英文混排的情况下,可能会出现分行不准确的问题。这通常是由于字体设置或宏包兼容性问题导致的。确保使用支持中英文混排的宏包和字体。 29. **什么是点阵字库和矢量...

    PHPWord中文手册

    需要注意的是,此库在处理中文字体时存在问题,需要按照文档开头的提示进行修正。 #### 三、文档属性设置 - **属性设置**:可以使用`$properties`对象来设置文档的创建者、公司、标题、描述等属性。例如: ```php...

    2021-2022计算机二级等级考试试题及答案No.1088.docx

    - **知识点**: 软件是计算机系统中不可或缺的部分,它控制着硬件的行为,并为用户提供各种功能和服务。 - **解析**: “软件是计算机的灵魂,它赋予计算机以生命。”这句话强调了软件在计算机系统中的核心地位。没有...

    2021-2022计算机二级等级考试试题及答案No.1134.docx

    ` 这种写法表示上边框宽度为10像素、右边框宽度为1像素、下边框宽度为5像素、左边框宽度为20像素。 ### 4. SQL 创建表命令 - **知识点**:在SQL语言中,`CREATE TABLE`语句用于创建一个新的表。该命令后面跟随表的...

    css界面制作文档

    - `table#a`: 选择器指定了ID为`a`的表格,并设置了相对定位、宽度、高度、左对齐、显示空单元格以及边框合并等属性。 - `border-collapse:collapse;`属性使表格边框合并为单一的线条,避免了多重边框的出现。 4....

    html标签意义和各属性的意义和用法

    - `href="基本URL"`:设定基础URL,用于修正页面中的所有相对链接。 #### 标题与段落 - **`至&lt;h6&gt;`**:定义不同级别的标题,`&lt;h1&gt;`级别最高,`&lt;h6&gt;`级别最低。 - **`&lt;p&gt;`**:定义段落。 - `align="对齐方式"`:...

    计算机二级VisualFoxPro上机考试题库与答案解析36.docx

    - **增加字段**:在表设计器中,可以在字段列表中添加新字段,如"说明",设置字段类型为字符型(CHAR),宽度为60。 - **修改字段默认值**:通过SQL的`ALTER TABLE`语句可以修改字段的默认值。例如,将"S_T"表的...

    IEEE LaTeX模板

    IEEE LaTeX模板是专为在IEEE出版物上发表学术论文而设计的标准化模板,它遵循了IEEE的排版规范和格式要求。这个模板旨在帮助作者们更方便地撰写和格式化他们的科技论文,确保文章符合国际电气电子工程师学会(IEEE)...

    计算机专业技能模拟题

    3. **程序改错**:修正快速查找姓名为“李明”学生并显示的程序,检查并修改错误的数据库查询语句,理解并运用FIND、STORE和IF语句。 ### 网页设计与制作部分 1. **创建HTML表格**:要求创建一个表格,并设置样式...

    使表格的标题列可左右拉伸jquery插件封装

    - 在mouseup事件中,最终更新表格单元格的宽度,并将光标恢复为默认样式。 5. 使用方法: - 单独调整单个表格的宽度,通过调用“$("#table_id").tableresize();”。 - 调整页面上所有表格的宽度,通过调用“$(...

    verilog_ecc_gen

    在具体实现过程中,Verilog代码将定义模块,输入为原始数据,输出为ECC校验位。模块内部可能包括状态机、算术逻辑单元(ALU)以及查表操作。对于查表操作,可以使用Verilog的`memory`块或者`always`块中的条件语句来...

    html 滚动条在IE6和IE7中兼容性问题

    在IE6中,当页面元素(以table为例)的CSS样式中没有明确指定高度(height)或宽度(width)时,即使通过CSS定义了滚动条样式,滚动条可能也不会显示出来。这是因为IE6对滚动条显示的触发条件要求更为严格,它需要...

Global site tag (gtag.js) - Google Analytics