带表的自举网格系统

Question

我想要这样的桌子：

​

​

我试着用引导网格系统来做这件事，但work...here不是我的代码。也许问题是类容器的问题？把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放在表前面。

以下是对自举网格系统的一些基本理解。

Answer 2

容器div必须位于表的外部，这样它才能正确地对齐。此外，当您在表中使用theader、tbody和tfooter标记以及th/td标记时，表的结构将完全对齐。