高级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; 
}