CSS显示:表不显示边框


73
<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'指定它-它可以工作。但是,如果我给它加上%-就行不通。

.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 %
}

某处出了点问题,但我不知道在哪里。请帮忙!


您是否尝试为单元格元素指定边框?还是不是您想要的?
帕维尔亚当斯基

Answers:


161

您需要添加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>

1
谢谢!您的解决方案有所帮助!
yathrakaaran '16

2

您需要将添加bordertablecell类。

另外,为了使其外观漂亮,您将需要添加border-collapse:collapse;到表类中。

示例:http//jsfiddle.net/jasongennaro/4bvc2/

编辑

根据评论

我正在将边框应用于div,它应该显示正确吗?

是的,但是一旦将其设置为显示为a table,它便将以...的形式工作...table因此,您将需要遵循css规则来显示表。

如果您需要设置border只对行,用border-topborder-bottom ,然后最左边和最右边的细胞组特定的类。


为什么我不能连续给边框?
Vivek Chandra

我正在对div应用边框,应该正确显示它吗?
Vivek Chandra

没问题@Vivek。乐意效劳!
杰森·根纳罗

2

表格行不能具有border属性。通过为所有单元格提供顶部和底部边框,并为最左侧和最右侧的单元格分别添加一个带有左右边框的类,可以在每行周围获得边框。

JS小提琴链接

编辑:我忘记了border-collapse:collapse。那也可以。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.