表格边框颜色
来源:互联网 发布:unity3d 自带寻路算法 编辑:程序博客网 时间:2024/05/05 03:11
为什么碰到表格我都想记录一下,:) 这次是关于表格边框的,碰到问题后也折腾了一小会儿才完成,记录后可能会记得更加牢固。
一 表格的外观及结构
HTML 代码如下:
<table border="1">
<tr>
<td class="bkf0">发布日期:</td>
<td>2010-11-10</td>
<td class="bkf0">工作地点:</td>
<td>宁波</td>
</tr>
<tr>
<td class="bkf0">性别要求:</td>
<td>女</td>
<td class="bkf0">年龄要求:</td>
<td>16-25岁</td>
</tr>
</table>
<tr>
<td class="bkf0">发布日期:</td>
<td>2010-11-10</td>
<td class="bkf0">工作地点:</td>
<td>宁波</td>
</tr>
<tr>
<td class="bkf0">性别要求:</td>
<td>女</td>
<td class="bkf0">年龄要求:</td>
<td>16-25岁</td>
</tr>
</table>
二 几种样式设定
首先是不加任何样式,会默认显示:
如果加入下面这段 CSS reset:
table {
border-collapse:collapse;
border-spacing:0;
}
border-collapse:collapse;
border-spacing:0;
}
这时显示成了:
把 table 的 border-color 设置一下是否可行,加入以下代码:
table {
border-collapse:collapse;
border-spacing:0;
border-color: red;
}
border-collapse:collapse;
border-spacing:0;
border-color: red;
}
这时在 Firefox 3 下达到了预期的效果,chrome 下改变了间隔和表格边框的颜色(但是并不一致),而 IE 下就比较令人费解了,表格的四个边框产生了一种渐变效果,将 #ccc 改成 red 就能看得更加明显了:
没有达到预期的效果,继续改进,看看直接设置 border 会怎样,将 CSS 代码改成:
table {
border-collapse:collapse;
border-spacing:0;
border: 1px solid red;
}
border-collapse:collapse;
border-spacing:0;
border: 1px solid red;
}
这时在 chrome 下也达到预期效果了,IE 没有变化,此法还不够。注意到 IE 下面表格的外边框确实变成单一的红色了,只是间隔线没有变化,就试了下如下代码:
table {
border-collapse:collapse;
border-spacing:0;
border: 1px solid red;
}
table td {
border-color: red;
}
border-collapse:collapse;
border-spacing:0;
border: 1px solid red;
}
table td {
border-color: red;
}
达到预期的效果,over!
三 最终代码
table {
border-collapse:collapse;
border-spacing:0;
border: 1px solid #ccc;
}
table td {
border-color: #ccc;
padding: 10px 0;
width: 130px;
text-align: center;
}
.bkf0 {
background: #f0f0f0;
}
border-collapse:collapse;
border-spacing:0;
border: 1px solid #ccc;
}
table td {
border-color: #ccc;
padding: 10px 0;
width: 130px;
text-align: center;
}
.bkf0 {
background: #f0f0f0;
}
- 设置表格边框颜色
- 表格边框颜色
- 表格边框颜色
- 设置表格边框颜色
- bootstrap3表格边框颜色
- 网页表格边框颜色效果
- 表格— — 表格边框的颜色
- 如何修改PPT表格的边框颜色
- latex表格线的颜色设置(边框添加颜色)
- 如何定义表格的边框线粗细及颜色
- 兼容所有的浏览器表格细边框相间颜色样式
- 08-单元格的边框颜色(表格样式)
- Excel怎么改变表格边框及背景颜色
- 百度编辑器ueditor插入表格没有边框颜色的解决方法
- 安卓-表格布局 及 边框颜色设置
- 表格边框
- 表格边框
- 使用百度编辑器ueditor表格无法显示边框以及边框颜色等系列问题解决方案
- 如何带好软件测试新人
- json字符串中的特殊字符处理
- 敏捷开发般若敏捷系列之一:序言
- SQL Server 2008如何创建定期自动备份任务
- 3DMax Plugin - 导出插件
- 表格边框颜色
- 如何获得当前运行模块在进程地址空间的位置
- MySQL服务消失解决
- 广播机制相关内容整理
- ubuntu使用
- Table边框使用总结
- UML 实例
- Android常用控件总结
- MS的wifi连接不稳定的原因和解决办法------------终于整明白了