css显示：表格不显示边框答案

【问题标题】：css display:table not displaying the bordercss显示：表格不显示边框
【发布时间】：2011-11-02 18:05:58
【问题描述】：

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

某处出了点问题，但我无法理解在哪里。请帮忙！

【问题讨论】：

您是否尝试过为单元格元素指定边框？还是不是你想要的？

标签： fluid-layout css css-tables

【解决方案1】：

您需要将border 添加到tablecell 类中。

另外，为了让它看起来更漂亮，您需要将border-collapse:collapse; 添加到表类中。

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

编辑

根据评论

我正在为 div 应用边框，它应该正确显示吗？

是的，但是一旦您将其设置为显示为table，它就会以table 的形式显示...，因此您需要遵循 css 规则来显示表格。

如果您只需要在行上设置border，请使用border-top 和border-bottom，然后为最左边和最右边的单元格设置特定的类。

【讨论】：

为什么不能给一行边框？？
我正在为 div 应用边框，它应该正确显示吗？
没问题@Vivek。很高兴为您提供帮助！

【解决方案2】：

表格行不能有边框属性。您可以通过为所有单元格设置一个顶部和底部边框，并为最左侧和最右侧的单元格分别添加一个具有左右边框的类，从而获得每行的边框。

JS fiddle link

编辑：我忘了border-collapse:collapse。这也行。

【讨论】：

【解决方案3】：

您需要将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>

【讨论】：