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

本文摘自PHP中文网，作者黄舟，侵删。

在默认的情况下，我们的CSS将Table的边框清除掉了，下面与大家分享下CSS控制Table内外边框、颜色、大小的样式，想学习的朋友可以参考下

其实按照常理来说，现在的网站应该早已经抛弃什么表格了，现在肯定是p+CSS当道嘛！不过客户的网站在添加内容的时候始终不满意那些边框效果：要么没有，要么很粗。看得出来，这位客户是位完美主义者。

在默认的情况下，我们的CSS将Table的边框清除掉了，是没有的，看到的效果是这样的。

CSS控制Table内外边框、颜色、大小示例三联

无边框Table

为了给，表格加一个边框，我在CSS里面写了这样一句：

1	`.table{border:solid` `1px` `#add9c0;}`

哎，看来是我太天真了，浏览器里看到的效果是这样的：

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

只有外边框的Table

好吧，我承认，我确实已经有些年头没有动过Table了，不过这完全不是我的责任，因为Table其实已经被大众设计师们抛弃了。于是我就删掉那句CSS样式，重新这样写了这样一句：

1	`.td{border:solid` `1px` `#add9c0;}`

不过杯具依然发生，像客户要求这么细的人，怎么能忍受Table表格的内边框这么粗呢？

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

内边框很粗的Table

没有办法，只好出绝招了，删掉刚刚写的CSS代码，直接写入：

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

好了，这下看你还敢嚣张？这不就乖乖地就范了吗？

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

￥83.86元 人民邮电出版社

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