table边框完全去掉的方法

表格中边框的显示

只显示上边框 <tableframe=above>

只显示下边框 <tableframe=below>

只显示左、右边框 <tableframe=vsides>

只显示上、下边框 <tableframe=hsides>

只显示左边框 <tableframe=lhs>

只显示右边框 <tableframe=rhs>

不显示任何边框 <tableframe=void>

.表格的分隔线可以隐藏

<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线

<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一开始的需求只是表头部分在滚动时能一直固定在头部,那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code 1 2 3 4 给tr设置relative后就能相对table定位了,看来很简单啊,但问题是这个方法ie8和ff都无效,而且存在很多问题,所以很快就被抛弃了。 ps:该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的(默认是false),但在ff是必须的,建议使用时都写上参数。 还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不了样式了。 克隆之后再设置样式: this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果,但table比较特别,测试下面的代码: Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念: 面向现代浏览器,高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能 功能: Basic table (基础表格) Grid (高级表格) Size (尺寸) Striped (斑马线条纹) Table with border (带边框) Cell style (单元格样式) Column resizable (列宽拖动) Maximum table height (最大高度) Resize height and width (响应式宽高) Fixed column (固定列) Grouping table head (表头分组) Highlight row and column (高亮行、列) Table sequence (序号) Radio (单选) Checkbox (多选) Sorting (排序) Filter (筛选) Rowspan and colspan (合并行或列) Footer summary (表尾合计) Import (导入) Export (导出) Print (打印) Show/Hide column (显示/隐藏列) Loading (加载中) Formatted content (格式化内容) Custom template (自定义模板) Context menu(快捷菜单) Virtual Scroller(虚拟滚动) Expandable row (展开行) Pager(分页) Form(表单) Toolbar(工具栏) Tree table (树形表格) Editable CRUD(增删改查) Validate(数据校验) Data Proxy(数据代理) Keyboard navigation(键盘导航) Modal window(模态窗口) Charts(图表工具) 更新日志: v4.0.20 table 修改单选框、复选框获取值错误问题 grid 修复 KeepAlive 中报错问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值