Tortank Tortank - 22 days ago 6
CSS Question

HTML table CSS design for a "calendar"

I'm trying to create a "calendar" in a HTML Table.

Here is the code idea:

<table>
<thead>
<tr>
<th>21/04/2016</th>
<th>17/08/2016</th>
<th>22/10/2016</th>
</tr>
<tr>
<th>11:00</th>
<th>13:00</th>
<th>18:00</th>
<th>22:00</th>
<th>15:00</th>
<th>08:00</th>
<th>19:00</th>
<th>23:50</th>
<th>10:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</tbody>




Here is the REAL idea:

enter image description here

1 Date can have 3 time

The user is then able to select if he's available for any date / time

The problem is, since we add another table row for the times, they won't stay in date's column.

I guess some CSS can fix this.

But I have NO IDEA how it can be done, any hint ?

Answer

You can start like this:

            table{font-family: Arial;font-size: 15px;}
            table thead{background-color: #3385e4;}
            table thead tr th{padding: 15px 10px;}
            table tbody tr td{padding: 15px 10px;text-align: center;border: 1px solid #cdcdcd;}
            table tbody tr.hours td{background-color:#d0e3fb;}
            table tbody tr.hours td.active{background-color:#d1f3d1;}
            table tbody tr td span{display: table;width: 100%;}
        <table>
            <thead>
                <tr><th colspan="9">Calendar</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="3">21/04/2016</td>
                    <td colspan="3">17/08/2016</td>
                    <td colspan="3">22/10/2016</td>
                </tr>
                <tr class="hours">
                    <td class="active">
                        <span>11:00</span>
                        <input type="checkbox" checked />
                    </td>
                    <td>
                        <span>13:00</span>
                        <input type="checkbox" />
                    </td>
                    <td class="active">
                        <span>18:00</span>
                        <input type="checkbox" checked="" />
                    </td>
                    <td>
                        <span>22:00</span>
                        <input type="checkbox" />
                    </td>
                    <td>
                        <span>15:00</span>
                        <input type="checkbox" />
                    </td>
                    <td class="active">
                        <span>08:00</span>
                        <input type="checkbox" checked="" />
                    </td>
                    <td>
                        <span>19:00</span>
                        <input type="checkbox" />
                    </td>
                    <td>
                        <span>23:50</span>
                        <input type="checkbox" />
                    </td>
                    <td class="active">
                        <span>10:00</span>
                        <input type="checkbox" checked="" />
                    </td>
                </tr>
            </tbody>
        </table>