html5+CSS如何控制Table内外边框和颜色以及大小的图文教程(2)-木庄网络博客

2022-03-31 16:13:08 PHP中文网 JavaScript 百度已收录

HTML5 CSS控制Table内外边框、颜色、大小示例3

边框很细的Table

亲密无间是没有罪过的，但是文字内容和表格边框亲密到没有空隙就影响到美观了，于是将刚刚那两句代码稍作修改：

1 2	`.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}` `.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}`

如果需要td两边都不需要那么亲密的话，就这样写：

1 2	`.td{border:solid` `#add9c0;` `border-width:0px` `1px` `1px` `0px;` `padding:10px` `0px;}` `.table{border:solid` `#add9c0;` `border-width:1px` `0px` `0px` `1px;}`

好了，现在来看看最后的效果吧，这个时候客户已经非常开心了，他要的就是这个效果！

HTML5 CSS控制Table内外边框、颜色、大小示例4

理想效果的Table

如果大家在其他地方用到这样的方法的时候，一定要注意CSS代码的规范写法：

推荐写法：border-width:0px 1px 1px 0px;

不推荐：border-width:0 1 1 0;

最后还是提醒大家，能不用Table就尽量不要用Talbe吧，毕竟不是多么先进的技术了，应该试着往p+CSS这方面努力！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者