fluid-layout – css显示:表不显示边框

前端之家收集整理的这篇文章主要介绍了fluid-layout – css显示:表不显示边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<html>
    <style type="text/css">
        .table   { display: table;}
        .tablerow  { display: table-row; border:1px solid black;}
        .tablecell { display: table-cell; }
    </style>
    <div class="table">
        <div class="tablerow">
            <div class="tablecell">Hello</div>
            <div class="tablecell">world</div>
        </div>
        <div class="tablerow">
            <div class="tablecell">foo</div>
            <div class="tablecell">bar</div>
        </div>
    </div>
</html>

根据我的理解,一个黑色边框应该绘制在我通过tablerow类指定的每一行。但边框不会出现。

我想改变一个行的高度。如果我指定它与’px’ – 它的工作。但是,如果我给它一个% – wont工作。我尝试以下

.tablerow  { 
    display: table-row;
    border:1px solid black;
    position: relative; //not affecting anything and the border disappears!! 
    //position: absolute; // if this is set,the rows overlaps and the border works
    height: 40%; // works only if specified in px and not in %
}

在某个地方发生错误,但我不能理解在哪里。请帮忙!

解决方法

你需要添加border-collapse:collapse;到.table类,它像这样工作:
<html>
<style type="text/css">
    .table   { display: table; border-collapse: collapse;}
    .tablerow  { display: table-row; border: 1px solid #000;}
    .tablecell { display: table-cell; }
</style>
<div class="table">
    <div class="tablerow">
        <div class="tablecell">Hello</div>
        <div class="tablecell">world</div>
    </div>
    <div class="tablerow">
        <div class="tablecell">foo</div>
        <div class="tablecell">bar</div>
    </div>
</div>
</html>

猜你在找的CSS相关文章