帶表的自舉網格系統

Question

我想要這樣的桌子：

我正在嘗試使用引導網格系統來執行此操作，但是它不起作用...這是我的代碼。 也許問題出在類容器上？ 將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 標記時，表的結構將完美對齊。