网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 Table相关整理及Javascript操作table,tr,td
内容
    很多人都有这种经历:当某个td中没有内容或者没有可见元素时,td的border也会消失。本文将给出解决方案,感兴趣的朋友可以了解下,或许本文对你有所帮助
    效果良好的表属性设置:
    代码如下:
    <table cellSpacing="0" cellPadding="0" border='1' bordercolor="black"
    style='border-collapse:collapse;table-layout: fixed'></table>
    很多人都有这种经历:当某个td中没有内容或者没有可见元素时,td的border也会消失。解决方案就是给table添加样式border-collapse:collapse
    一般的文字截断(适用于内联与块):
    代码如下:
    .text-overflow{
    display:block;/*内联对象需加*/
    width:31em;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    }
    对于表格的话,定义有一点不一样:
    代码如下:
    table{
    width:30em;
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
    }
    td{
    width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
    }
    Javascript操作table,tr,td
    代码如下:
    table.moveRow(m,n)//交换表的行(IE) m和n之间的行依次移动
    table.deleteRow(index)//行删除
    table.insertRow(index)//在index位置插入行,并返回该TR
    tr.insertCell(index)//插入单元格,并返回该TD
    tr.deleteCell(index)
    tr.rowIndex//返回tr在表中的位置
    td.cellIndex //返回td在tr中的位置
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/17 6:02:19