Усовершенствованная стилизация таблиц 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 используются элементы уровня блока, а spaninput - встроенные, ячейки и строки таблицы получают собственные отображаемые значения 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;
}