css table不显示外边框

在编写CSS样式表时，有时候我们需要对表格进行美化。我们可以通过CSS来给表格添加各种各样的样式，比如修改表格边框样式、添加背景颜色等。但是，当我们尝试给表格添加外边框时，有时候会发现表格边框并没有显示出来。那么，这是为什么呢？

table {
      border: 2px solid black;
}

上述代码中，我们给表格添加了2像素宽的黑色实线边框。但是，当我们在浏览器中查看表格时，会发现边框并没有展现出来。这是因为我们在CSS中使用了默认的border-collapse属性，这个属性默认为“collapse”，表示将表格边框合并在一起，使其看起来像一条边框。

table {
      border: 2px solid black;
      border-collapse: separate;
}
    

通过将border-collapse属性的值设置为“separate”，我们可以解决表格外边框不显示的问题。这样，表格边框就不会再被合并在一起了，而是分开展现出来。

需要注意的是，border-collapse属性会影响到表格的边框显示方式。当我们将border-collapse属性的值设置为“collapse”时，所有单元格的边框都会合并在一起，而当我们将其设置为“separate”时，所有单元格的边框都会分开展现出来。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！