简体   繁体   中英

Bootstrap grid system with table

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>

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 .

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 .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM