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的指定行绘制class.But边境犯规上来。CSS显示：表中未显示边框

，我想改变row.If我“PX”指定它的高度 - 它work.But，如果我用％给它 - 不会干活尝试以下

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

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

来源

2011-08-24 Vivek Chandra

你试过指定边界的电池元件？或者它不是你想要的？ –

119

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

来源

2011-08-24 12:18:15 dSquared

谢谢，这有帮助。 –

谢谢你好解决方案 –

谢谢！你的解决方案有帮 – yathrakaaran

您需要将border添加到tablecell类。

此外，为了使它看起来不错，您需要将border-collapse:collapse;添加到表类。

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

编辑

按照注释

我申请一个边界一个div，它应该得到显示吧？

是的，但一旦你将它设置为显示为table那就是它会如何行动......为table，所以你一定要去遵循CSS规则显示表。

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

来源

2011-08-24 12:06:48

为什么不能给一行的边框？ –

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

查看我的编辑上面@Vivek Chandra –

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

JS fiddle link

编辑：我忘了border-collapse:collapse。这也会起作用。

来源

2011-08-24 12:17:47

CSS显示：表中未显示边框

回答

相关问题