如何将这张桌子放在一个盒子里？

时间：2015-04-14 07:37:51

标签： html css html-table

如果你运行下面的代码片段，你会看到两个轴都溢出的表格。我想要的是把它放在一个盒子里，这样你就可以一直看到水平和垂直的滚动条。如果窗口的大小发生变化，此框也应与页面一起缩放。从本质上讲，这就像查看Microsoft Excel电子表格一样，窗口边缘和表格边框之间有一致的边框，您可以随时查看滚动条。我怎么能这样做？

＆＃13;
＆＃13; 
.sidebar {
    position: fixed;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #aaa;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100px;
}

.main {
    margin-left:100px;
}
＆＃13; 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>
    <div class="container">
        <div class="sidebar">
            <div>
                <p>Fixed Sidebar</p>
            </div>
        </div>
        <div class="main">
            <div class="row">
                <p>Some content above table</p>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-condensed">
                    <thead>
                        <tr>
                            <th>
                                Column 1
                            </th>
                            <th>
                                Column 2
                            </th>
                            <th>
                                Column 3
                            </th>
                            <th>
                                Column 4
                            </th>
                            <th>
                                Column 5
                            </th>
                            <th>
                                Column 6
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                some really really really really long piece of data that's going to make my table overflow on the x-axis
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                        <tr>
                            <td nowrap>
                                data 1
                            </td>
                            <td nowrap>
                                data 2
                            </td>
                            <td nowrap>
                                data 3
                            </td>
                            <td nowrap>
                                data 4
                            </td>
                            <td nowrap>
                                data 5
                            </td>
                            <td nowrap>
                                data 6
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

这是你想要的吗？

为table-responsive班级

添加此类型 
.table-responsive {
overflow-x: scroll;
overflow-y: scroll;
width:100%;
height:100%;}

https://jsfiddle.net/puorqt13/

答案 1 :(得分：0)

我最终解决了以下问题：

＆＃13;
＆＃13; 
.sidebar {
    position: fixed;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #aaa;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100px;
}
.main {
    margin-left:100px;
}
.table-viewport {
    position:absolute;
    top: 50px;
    bottom: 15px;
    left: 115px;
    right: 15px;
    overflow-y: scroll;
    border: 1px solid #aaa;
}
＆＃13; 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<body>
    <div class="container">
        <div class="sidebar">
            <div>
                <p>Fixed Sidebar</p>
            </div>
        </div>
        <div class="main">
            <div class="row">
                <p>Some content above table</p>
            </div>
            <div class="table-viewport">
                    <table class="table table-bordered table-condensed">
                        <tr>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>Column 3</th>
                            <th>Column 4</th>
                            <th>Column 5</th>
                            <th>Column 6</th>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>some really really really really long piece of data that's going to make my table overflow on the x-axis</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                        <tr>
                            <td nowrap>data 1</td>
                            <td nowrap>data 2</td>
                            <td nowrap>data 3</td>
                            <td nowrap>data 4</td>
                            <td nowrap>data 5</td>
                            <td nowrap>data 6</td>
                        </tr>
                    </table>
            </div>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题