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;})

阅读 8.4k
1 个回答

把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设置了也没有用。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题