深夜一男子制作表格，发现css中隐藏的惊天秘密2019年9月9日2点

总结：对于使用css来制作一个圆角的表格出现的问题和解决方式。

ⅰ，当表格不加载背景图片时，

当设置表格行和列的边框时候会出现如下图所示的情况：（只设置了行和列的边框）

如图可以看出在边框底部和平的行里面左右的两个边角的圆角和上面的是不一样的。

分别设置了table的四个边框：

解决办法是取消底边的tfoot的边框，改为设置table的边框可以解决如下图：

 

如果在表格的最后一行不是合并的表格时，则可以按照直接设置table的圆角或者分别设置四个边框的圆角来实现如下图：

其中的每行和每列的边框则可以分别进行设置如下图：

ⅱ，table加载背景图片：

当加载的背景图片背景色和页面是同样的颜色，那么加载后的背景图片就会显示

出四个圆角的带有背景图片的表格如下图：

当家在的图片背景色和页面不一致时候，就不能在设置table的边框了，否则显示的就是图片的直角，如下图

所以解决办法就是取消table的边框，并且在表格每个行和列上分别添加边框（四周的边框不能添加）如下图：

通过设置边框的圆角发现制作出圆角的表格有很多中方法，多次的尝试，发现灵活的运用各种功能的代码能更加快速的实现目标。

table {
    /* border-collapse: collapse; */
    border-collapse: separate;
    width: 800px;
    height: 500px;
    margin: 0 auto;
    /* box-shadow: 7px 6px 5px #888; */
    position: relative;
    border-spacing: 0;
    /* border: 1px solid red; */
    border-radius: 10%;
}

table tfoot {
    /* 调整文本字体间距 */
    letter-spacing: 15px;
}

table::before {
    content: '';
    width: 800px;
    height: 500px;
    position: absolute;
    left: 0;
    right: 30px;
    top: 142px;
    background-image: url("../img/111.jpg");
    background-size:800px 500px;
    /* 设置图片的固定尺寸 */
    opacity: 0.2;
    /* ackground-size: cover; */
    /*设置图片按照比例缩放*/
}

 border-collapse: collapse; 由于不支持border的radious属性所以使用

border-collapse: separate：

分隔（separated）模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定的。

border-spacing 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的） 边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。该属性只适用于 border-collapse 值是 separate 的时候。