带表的Bootstrap网格系统

Question

我想要这样的表：

我试图用bootstrap网格系统来做这件事，但它不起作用......这是我的代码。也许问题出在类容器上？将div放在那里是正确的吗？

<table class="table table-bordered" cellpadding="0" cellspacing="0">
<div class="container">
    <tr>
        <th class="col-sx-6">Avanced Time targetting</th>
        <th class="col-xs-1">Midnight<br/>12am</th>
        <th class="col-xs-1">4am</th>
        <th class="col-xs-1">8am</th>
        <th class="col-xs-1">Noon<br/>12pm</th>
        <th class="col-xs-1">4pm</th>
        <th class="col-xs-1">8pm</th>
    </tr>
    <tr>
        <td class="col-sx-6">
            <span>Monday</span>
            <ul>
                <li>
                    <button>All days</button>
                </li>
                <li>
                    <button>Morning</button>
                </li>
                <li>
                    <button>9-5</button>
                </li>
                <li>
                    <button>Evening</button>
                </li>
                <li>
                    <button>Custom</button>
                </li>
                <li>
                    <button>Clear</button>
                </li>
                <li>
                    <button>Restore</button>
                </li>
            </ul>
        </td>
        <td class="col-xs-1">
            <input type="text"/>
        </td>
        <td class="col-xs-1">
            <input type="text"/>
        </td>
        <td class="col-xs-1">
            <input type="text"/>
        </td>
        <td class="col-xs-1">
            <input type="text"/>
        </td>
        <td class="col-xs-1">
            <input type="text"/>
        </td>
        <td class="col-xs-1">
            <input type="text"/>
        </td>
    </tr>
</div>

Answer 1

您的 HTML 代码是正确的，但您需要在表格之前放置容器 div。

以下是对bootstrap grid system的一些基本了解。

Answer 2

容器div 必须 表格才能正确对齐。此外，当您在自己的 theader ， tbody 和 tfooter 标签中使用 theader ， tfooter 标签时，您的表格结构将完全对齐表格以及 th / td 标记。