简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

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

来源:易贤网   阅读:899 次  日期:2016-06-21 13:52:31

温馨提示:易贤网小编为您整理了“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中的位置

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:关于IE标签LI文字换行问题
下一篇:td 内容自动换行 table表格td设置宽度后文字太多自动换行
易贤网手机网站地址:Table相关整理及Javascript操作table,tr,td
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!