CSS空間

Question

我發現這裏類似的問題

Space between two rows in a table?

，但我不想象的答案，每個答案是不同的，聽起來像沒有達成協議

我正在動態顯示一個表格，只需要調整CSS，以便行之間有空格，用一行分隔即可。我不希望這些排看起來相互擠壓。他們說的是填充細胞。我硬編碼到html表格cellpadding，它沒有任何效果。唯一真正改變外觀的是細胞間距，但是光學效果不好。

我不明白他們是如何在下面寫下答案的，因爲他們使用了很多大括號，並且據我所知，您在CSS文件中創建一個以'。'開始的類。和2個括號，並把所有的東西，但他們寫了這個：

table tr{ float: left width: 100%; } 

tr.classname { margin-bottom:5px; } 

但他們啓動時不聲明類，當他們在中間，他們創造了TR類。我不明白這一點。

有誰知道如何以正確的方式把代碼放在合理的位置嗎？

在這種情況下

Answer 1

tr.classname意味着每Tr elment帶class = 「類名」 將繼承CSS

像

a.info {}

將與所有的鏈接工作class =「info」

Answer 2

你可能會嘗試像這樣的CSS來讓行間隔很好的水平線：

table { 
    border-collapse: collapse; 
} 

td { 
    padding: 10px 0;  /* 10px top & bottom padding, 0px left & right */ 
    border-width: 1px 0; /* 1px top & bottom border, 0px left & right */ 
    border-color: #000; 
    border-style: solid; 
} 

每一行的上下都有一個邊框，在單元格內容上方和下方都有10個像素的間距。

---

如果你不希望在最頂部&表底邊框，你可以改變CSS位：

table { 
    border-collapse: collapse; 
} 

td { 
    padding: 10px 0; /* 10px top & bottom padding, 0px left & right */ 
} 

.separating_line { 
    border-top: 1px #000 solid; /* top border only */ 
} 

然後給所有的行，但第一.separating_line類，像這樣：

<table> 
    <tr> 
     <td>content</td> 
    </tr> 
    <tr class="separating_line"> 
     <td>content</td> 
    </tr> 
    <tr class="separating_line"> 
     <td>content</td> 
    </tr> 
</table> 

---

我寫的CSS可以在你原來的職位被改寫，如：

tr.separating_line { 
    border-top: 1px #000 solid; /* top border only */ 
} 

，使這種風格只被應用於與separating_line類，如果你想用separating_line類以不同的風格不同的元素，這可能是有用的一個TR元素。

tr.separating_line { 
    border-top: 1px #000 solid; /* top border only */ 
} 
div.separating_line { 
    border-top: 3px #F00 dashed; 
} 

---

我很抱歉，如果我誤解了你的問題，但我希望我的回答有所幫助。 =）