• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Table相关整理及Javascript操作table,tr,td
    效果良好的表属性设置:

    复制代码
    代码如下:

    <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中的位置
    上一篇:Form表单中method=post/get两种数据传输的方式的区别
    下一篇:td 内容自动换行 table表格td设置宽度后文字太多自动换行
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Table相关整理及Javascript操作table,tr,td Table,相关,整理,及,Javascript,