Question

I’m trying to achieve table similar to this using css/html only. Is it possible ?

So the white area is the places table. This is the HTML for the table :

<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>

And my 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;
            }

I was pretty sure, that although tables are a bit different than other html objects, padding should work here. But it looks that I was wrong. Cellspacing/cellpading have no effect. Currently I was able to get something looking like this :

Answer 1

You need the border-spacing property.

Table cells are not like other elements, because while div and p gets are block level elements, and span and input are inline, table cells and rows get their own table-cell and table-row display values.

Using border-spacing with border-collapse: separate will give you what you’d need. Have a look: http://jsfiddle.net/kjag3/1/

PS. I’ve also taken the liberty of cleaning up the HTML by separating them into two tables, so you won’t need the fillers for the empty cells.