如何使用html5+CSS控制Table内外边框和颜色以及大小-创新互联
今天就跟大家聊聊有关如何使用html5+CSS控制Table内外边框和颜色以及大小，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
其实按照常理来说，现在的网站应该早已经抛弃什么表格了，现在肯定是p+CSS当道嘛！不过客户的网站在添加内容的时候始终不满意那些边框效果：要么没有，要么很粗。看得出来，这位客户是位完美主义者。
在默认的情况下，我们的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;
最后还是提醒大家，能不用Table就尽量不要用Talbe吧，毕竟不是多么先进的技术了，应该试着往p+CSS这方面努力！
看完上述内容，你们对如何使用html5+CSS控制Table内外边框和颜色以及大小有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文名称：如何使用html5+CSS控制Table内外边框和颜色以及大小-创新互联
本文URL：http://pwwzsj.com/article/dspijh.html
