高級css/html表格樣式

Question

我正在嘗試使用css/html來實現類似於此的表格。可能嗎 ？

所以白色區域爲places表。這是表的HTML：

<table class="places"> 
    <tr> 
     <td class="solid">K</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td class="solid">P</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td class="solid">25</td> 
     <td class="solid">26</td> 
     <td>&nbsp;</td> 
     <td class="solid">47</td> 
     <td class="solid">48</td> 
    </tr> 

    (...) 

</table> 

而且我的CSS：

.places{ 
    position:relative; 
    background:white; 
    width:160px; 
    margin:0 auto; 
    text-align:left; 
    padding:5px; 
    border-collapse: collapse; 
} 
    .places tr { 
    } 
     .places td { 
      width:22px; 
      height:22px; 
      text-align:center; 
     } 
      .solid { 
       border: 1px solid #d2cdd1; 
       border-top:none; 
       background-color:#e7e7e7; 
       text-align:center; 
       cursor:pointer; 
      } 

我敢肯定的是，雖然表比其他HTML對象有點不同，填充應該在這裏工作。但看起來我錯了。 Cellspacing/cellpading無效。目前，我能得到的東西看起來像這樣：

Answer 1

您需要border-spacing屬性。

表細胞不像其他的元素，因爲在div和p得到的塊級元素，並span和input是內聯，表格單元格和行獲得自己table-cell和table-row顯示值。

使用border-spacing與border-collapse: separate會給你你需要的東西。看看：http://jsfiddle.net/kjag3/1/

PS。我也將清理HTML的自由分爲兩個表格，因此您不需要填充空單元格。

Answer 2

不能設置單元格之間的任何距離的原因是，你必須border-collapse設置爲collapse在樣式您table。如果使用border-collapse:separate代替，則應該可以爲表格單元格添加頁邊空白並在它們之間放置空格。

使用border-collapse:collapse使相鄰表格單元格使用相同的邊框;自然，當兩個元素相互連接時，您將無法在兩個元素之間放置空間。

Answer 3

我想知道表格結構是否適合您要實現的目標？

對我來說，'K'和'P'是標題，'K'和'P'之間的差距表明'K'和'P'是分開的，不應該是同一張桌子的一部分。所以我建議擺脫表和重組自己的HTML中使用簡單的標題和div標籤是這樣的：

HTML：

<div class="places"> 
    <h2>K</h2> 
    <div>25</div> 
    <div>26</div> 
    <div>23</div> 
    <div>24</div> 
    <div>21</div> 
    <div>22</div> 
</div> 

<div class="places"> 
    <h2>P</h2> 
    <div>47</div> 
    <div>48</div> 
    <div>45</div> 
    <div>46</div> 
    <div>43</div> 
    <div>44</div> 
</div> 

CSS：

.places { 
    width: 55px; 
    float: left; 
    margin: 0 25px 0 0; 

} 

.places h2, .places div { 
    width: 22px; 
    height: 22px; 
    margin: 0 3px 3px 0; 
    border: 1px solid #d2cdd1; 
    border-top:none; 
    background-color:#e7e7e7; 
    text-align:center; 
    cursor:pointer; 
    font-weight: normal; 
    font-size: 12pt; 
} 

.places div { 
    float: left; 
}