高级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分成两个表来清理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;
}