带表的自举网格系统

Question

I'd like to have table like this:

And I'm trying to do this with bootstrap grid system, but it doesn't work...here is my code. Maybe the problem is with class container? It is correct to put div there?

<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

Your HTML code is correct but you need to put the container div before the table.

Here is some of basic understanding about bootstrap grid system .

Answer 2

The container div must be outside the table in order for it to align correctly. Furthermore, the structure of your table will align perfectly when you use the theader , tbody and tfooter tags in your table along with the th/td tags .