"calendar"的 HTML 表格 CSS 设计

Question

我正在尝试在 HTML 表格中创建一个“日历”。

代码思路如下:

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

这是真正的想法:

1个日期可以有3个时间

然后用户可以选择他是否在任何日期/时间有空

问题是，由于我们为时间添加了另一个表格行，它们不会留在日期列中。

我想一些 CSS 可以解决这个问题。

但我不知道该怎么做，有什么提示吗？

Answer 1

你可以这样开始:

            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>