html - css表格加边框为什么不显示。
本文介绍了html - css表格加边框为什么不显示。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.min{display:table;}
.row{display:table-row; border-bottom:1px solid red;}
.col{display:table-cell;}
</style>
<body>
<div class="min">
<div class="row">
<div class="col">
<img src="#" alt="图片">
</div>
<div class="col">
<p>第二个</p>
</div>
</div>
</div>
</body>
</html>给.row加了一个下边框但是不显示（.row{display:table-row; border-bottom:1px solid red;}）
解决方案
把min的border-collapse设置为collapse吧，默认为separate。
.min{display:table;border-collapse: collapse;}
关于独立边框模型，有这么一段说明：
In this model, each cell has an individual border. The
'border-spacing' property specifies the distance between the borders
of adjoining cells. In this space, the row, column, row group, and
column group backgrounds are invisible, allowing the table background
to show through. Rows, columns, row groups, and column groups cannot
have borders (i.e., user agents must ignore the border properties for
those elements).
因此可以得知当表格为独立边框模型的时候，行，行组，列，列组的border设置了也没有用。
这篇关于html - css表格加边框为什么不显示。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
