我怎样才能把这个 table 放在一个盒子里？
How can I keep this table in a box?
如果您 运行 下面的代码片段，您会看到 table 在两个轴上溢出。我想要的是把它放在一个盒子里，这样你就可以一直看到水平和垂直的滚动条。如果更改 window 的大小，此框也应随页面缩放。从本质上讲，这就像查看 Microsoft Excel 电子表格，其中 window 的边缘和 table 的边界之间存在一致的边界，并且您可以一直看到滚动条。我该怎么做？
.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;
}
<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>
这是你想要的吗？
为您的 table-responsive 添加这样的样式 class
.table-responsive {
overflow-x: scroll;
overflow-y: scroll;
width:100%;
height:100%;}
我最终解决了如下：
.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;
}
<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>
如果您 运行 下面的代码片段，您会看到 table 在两个轴上溢出。我想要的是把它放在一个盒子里，这样你就可以一直看到水平和垂直的滚动条。如果更改 window 的大小，此框也应随页面缩放。从本质上讲，这就像查看 Microsoft Excel 电子表格，其中 window 的边缘和 table 的边界之间存在一致的边界，并且您可以一直看到滚动条。我该怎么做？
.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;
}
<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>
这是你想要的吗？
为您的 table-responsive 添加这样的样式 class
.table-responsive {
overflow-x: scroll;
overflow-y: scroll;
width:100%;
height:100%;}
我最终解决了如下：
.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;
}
<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>