如何在前两列中创建跨度跨度的表头？

Question

请看这个：

jsfiddle.net/hTRQJ/

<table class="table table-bordered table-striped"><thead>
            <tr>
                <th colpan="">
                    Checkin
                </th>
                <th>
                    Checkout
                </th>

                <th>
                    Description
                </th>
                <th>Total</th>

            </tr>
        </thead>
        <tbody><tr>
        <td>test</td>
        <td>2013-03-28 19:19:00</td>
        <td>2013-03-28 19:35:00</td>
        <td>Implementatie OAuth</td>
        <td>00:16</td>
    </tr><tr>
        <td>test</td>
        <td>2013-03-28 19:19:00</td>
        <td>2013-03-28 19:20:00</td>
        <td>Site werkt niet</td>
        <td>00:01</td>
    </tr><tr>
        <td>test</td>
        <td>2013-03-28 19:15:00</td>
        <td>2013-03-28 19:42:00</td>
        <td>apache recompile</td>
        <td>00:27</td>
    </tr><tr>
        <td>test</td>
        <td>2013-03-28 19:14:00</td>
        <td>2013-03-28 19:47:00</td>
        <td>Site werkt niet</td>
        <td>00:33</td>
    </tr><tr>
        <td>test</td>
        <td>2013-03-28 19:12:00</td>
        <td>2013-03-28 19:37:00</td>
        <td>Site werkt niet</td>
        <td>00:25</td>
    </tr><tr>
        <td>test</td>
        <td>2013-03-28 19:08:00</td>
        <td>2013-03-28 19:36:00</td>
        <td>apache recompile</td>
        <td>00:28</td>
    </tr><tr>
        <td>test</td>
        <td>2013-03-28 19:07:00</td>
        <td>2013-03-28 19:39:00</td>
        <td>Git repos</td>
        <td>00:32</td>
    </tr><tr>
        <td>test</td>
        <td>2013-03-28 19:05:00</td>
        <td>2013-03-28 19:34:00</td>
        <td>Server failure</td>
        <td>00:29</td>
    </tr><tr>
        <td colspan="4"><span style="float:right">Total</span></td><td>03:11</td></tr>
</tbody></table>

我希望“测试”与第一个日期时间在同一列中。我需要改变什么？

编辑：

我想要这样； http://s7.postimg.org/yb4hppnfv/Knipsel.png 所以你在最后一列看到的效果，我想要在第一列。

Answer 1

您是说您希望“测试” td 跨越两列，进入日期时间？

然后将 colspan 属性添加到 td 测试中，并将其设置为“2”。

<tr> <td colspan="2">test</td> </tr>

这样，它应该在一个空格上移动。

Answer 2

这是表格的标题和前两行。其余的可以按照相同的规则完成。

<table class="table table-bordered table-striped"><thead>
                                    <tr>
                                        <th colpan="2">
                                            Checkin/Checkout
                                        </th>
                                        <th>
                                            Description
                                        </th>
                                        <th>Total</th>

                                    </tr>
                                </thead>
                                <tbody><tr>
                                <td colspan="2">test 2013-03-28 19:19:00</td>
                                <td>2013-03-28 19:35:00</td>
                                <td>Implementatie OAuth</td>
                                <td>00:16</td>
                            </tr><tr>
                                <td colspan="2">test 2013-03-28 19:19:00</td>
                                <td>2013-03-28 19:20:00</td>
                                <td>Site werkt niet</td>
                                <td>00:01</td>
                            </tr><tr>

Answer 3

总的来说，您需要有名称的单元格数 (td = 5) 和 th colspans (2 + 1 + 2 = 5)。

这是前两行：

<table class="table table-bordered table-striped"><thead>
    <tr>
    <th colspan = "2">
        Checkin/Checkout
    </th>
    <th>
        Description
    </th>
    <th colspan = "2">Total</th>                                    
    <tr>
    <td>test</td>
    <td>2013-03-28 19:19:00</td>
    <td>2013-03-28 19:35:00</td>
    <td>Implementatie OAuth</td>
    <td>00:16</td>
</tr><tr>
    <td>test</td>
    <td>2013-03-28 19:19:00</td>
    <td>2013-03-28 19:20:00</td>
    <td>Site werkt niet</td>
    <td>00:01</td>
</tr>></tr></tbody></table>