Bootstrap表嵌套

Question

如何使用Bootstrap创建嵌套表：

| User name |  Email  |  User Phone
-----------------------------------
| user 01   |  mail01 |  060060060
| user 02   |  mail02 |  060060060
-----------------------------------
| User 02 Details -> HOW TO MAKE THIS TD? ***
-----------------------------------
| user 03   |  mail03 |  060060060

如果我尝试以这种方式进入，则所有表格根据细节TD的宽度以一种奇怪的方式调整大小：

<table>
    <thead>
        <td>Name</td>
        <td>Mail</td>
        <td>Phone</td>
    </thead>
    <tbody>
        <tr>
            <td>User 01</td>
            <td>Mail 01</td>
            <td>060060060</td>
        </tr>
        <tr>
            <td>User 02</td>
            <td>Mail 02</td>
            <td>060060060</td>
        </tr>
        <tr>
            <td>User 02 Details</td>
        </tr>
        <tr>
            <td>User 03</td>
            <td>Mail 03</td>
            <td>060060060</td>
        </tr>
    </tbody>
</table>

如何解决这个问题，以便整个表保持相同只是插入一行100％宽度的页面？

Answer 1

这是基本的HTML，colspan可以让你跨越几个列：

<td colspan="3">...</td>

您可以在http://jsbin.com/wecovutira/1/edit?html,output

上看到答案