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顯示：表中未顯示邊框

回答

相關問題