转载：HTML5CSS控制Table内外边框、颜⾊、⼤⼩⽰例
转⾃：
为了记录⾃⼰的问题，特意转载！如有侵犯，请联系我进⾏删除
//联系⼈:⽯虎 QQ:1224614774 昵称：嗡嘛呢叭咪哄
QQ:807236138 称:iOS 技术交流学习
在默认的情况下，我们的CSS将Table的边框清除掉了，下⾯与⼤家分享下CSS控制Table内外边框、颜⾊、⼤⼩的样式，想学习的朋友可以参考下
其实按照常理来说，现在的⽹站应该早已经抛弃什么表格了，现在肯定是DIV+CSS当道嘛！不过客户的
⽹站在添加内容的时候始终不满意那些边框效果：要么没有，要么很粗。看得出来，这位客户是位完美主义者。
在默认的情况下，我们的CSS将Table的边框清除掉了，是没有的，看到的效果是这样的。
CSS控制Table内外边框、颜⾊、⼤⼩⽰例 三联
⽆边框Table
为了给，表格加⼀个边框，我在CSS⾥⾯写了这样⼀句：
.table{border:solid 1px #add9c0;}
哎，看来是我太天真了，浏览器⾥看到的效果是这样的：
只有外边框的Table
好吧，我承认，我确实已经有些年头没有动过Table了，不过这完全不是我的责任，因为Table其实已经被⼤众设计师们抛弃了。于是我就删掉那句CSS样式，重新这样写了这样⼀句：
.td{border:solid 1px #add9c0;}
不过杯具依然发⽣，像客户要求这么细的⼈，怎么能忍受Table表格的内边框这么粗呢？
内边框很粗的Table
没有办法，只好出绝招了，删掉刚刚写的CSS代码，直接写⼊：
.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
好了，这下看你还敢嚣张？这不就乖乖地就范了吗？
边框很细的Table
亲密⽆间是没有罪过的，但是⽂字内容和表格边框亲密到没有空隙就影响到美观了，于是将刚刚那两句代码稍作修改：
.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
如果需要td两边都不需要那么亲密的话，就这样写：
.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
好了，现在来看看最后的效果吧，这个时候客户已经⾮常开⼼了，他要的就是这个效果！
理想效果的Table
如果⼤家在其他地⽅⽤到这样的⽅法的时候，⼀定要注意CSS代码的规范写法：
推荐写法：border-width:0px 1px 1px 0px;
不推荐：border-width:0 1 1 0;
html5颜代码
最后还是提醒⼤家，能不⽤Table就尽量不要⽤Talbe吧，毕竟不是多么先进的技术了，应该试着往DIV+CSS这⽅⾯努⼒！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。