Bootstrap--响应式表格布局

<div class="row">
    <div class="col-sm-2 col-md-2" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
        <ul class="nav nav-pills nav-stacked">
            <li class="active">
                <a href="#" class="text-muted">6346</a>
            </li>
            <li>
                <a href="#" class="text-muted">6346</a>
            </li>
            <li>
                <a href="#" class="text-muted">6346</a>
            </li>
        </ul>
    </div>
    <div class="col-sm-10 col-md-10" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <table class="table">
                    <caption class="pull-left">热歌</caption>
                    <tbody>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <div class="table-responsive">
                    <table class="table">
                        <caption class="pull-left">热歌</caption>
                        <tbody>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                <table class="table">
                    <caption class="pull-left">热歌</caption>
                    <tbody>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td><a href="#">千里之外</a></td>
                            <td><a href="#">周杰伦</a></td>
                            <td><a href="#">播放</a></td>
                            <td><a href="#">收藏</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

　　

转载于:https://www.cnblogs.com/NuoYer/p/5379145.html