给HTML表格加边框_HTML表格边框CSS样式设置技巧

老实说，在创建表格边框时，您需要注意细节。
过去，我在做项目时遇到过很多陷阱。

1 .最基本的边框 只需使用样式添加即可，如下所示：
内容

看，外面有一个1 像素粗的黑色边框。
但请注意，这会导致单元格之间出现双线，这非常烦人。

2 消除双线 关键是使用 border-collapse:collapse。
我记得有一次我做报告的时候，我没有加上这个，整个表格看起来就像被狗嚼碎了一样。
CSS 表{ 边框：1 px，实心000； 边界崩溃：崩溃；
添加后，外边框和单元格边框合二为一，专业多了。

3 自定义单元格边框 最好分别创建标题和数据单元格。
我曾经在订单表中在标题中使用深色边框，在数据上使用浅色虚线，以便更容易区分。
CSS th, td { 边框：1 px 实心 CCC； 内边距：8 px； } th { 背景颜色：f2 f2 f2 ；
不要忘记添加内边距，否则内容会侧向且缺乏吸引力。

4 高级效果 圆形边框很常见。
上次我创建活动统计表时，我添加了这个效果，客户说看起来不错。
CSS 表{ 边框：2 px实心007 BFF； 边框半径：8 px； 溢出：隐藏；
注意overflow:hidden，否则内边框会超出圆角。

阴影效果也是一个优点。
我通常使用这种浅色： CSS box-shadow: 0 2 px 5 px rgba(0,0,0,0.1 );
选项：水平偏移、垂直偏移、模糊半径和透明度。

5 注意事项 1 、风格统一是最重要的。
柜台柱上的实线和虚线混杂，颜色混乱。
上次修改别人的代码，几十个表格边框样式不一样，改完之后我就彻底秃了。
2 . 缩进不能省略。
如果单元格的内容位于边缘，用户将很难看到它。
3 .标题的背景颜色应与单元格的背景颜色不同。
浅灰色和白色是经常使用的。
4 . 应考虑响应能力。
如果窄屏手机的边框太粗，内容就会被遮挡。
您可以使用媒体查询来隐藏其他边框。
5 . 忘记了你的合适性别。
border-radius 和 box-shadow 在旧版 IE 中可能不起作用，因此需要添加替代样式。

6 完整示例 这是我最近使用的完整代码：