我面临的问题，而设置高度宽度溢出滚动。
<style>
tbody{
height:50px;display:block;overflow:scroll
}
</style>
<h3>Table B</h3>
<table style="border: 1px solid red;width:300px;display:block">
<thead>
<tr>
<td>Name</td>
<td>phone</td>
</tr>
</thead>
<tbody style='height:50px;display:block;overflow:scroll'>
<tr>
<td>AAAA</td>
<td>323232</td>
</tr>
<tr>
<td>BBBBB</td>
<td>323232</td>
</tr>
<tr>
<td>CCCCC</td>
<td>3435656</td>
</tr>
</tbody>
</table>
在这里参观我的小提琴
我想要表B像表A一样溢出滚动。
任何帮助都将不胜感激。
非常感谢,
M。
我猜你要做的是，保持标题固定，滚动正文内容。
你可以滚动内容到2个方向:
水平:你不能水平滚动内容，除非你使用滑块(例如jQuery滑块)。我建议在这种情况下避免使用表格。
vertical:使用tbody标记将无法实现这一点，因为分配display:block或display:inline-block将破坏表的布局。
下面是一个使用divs: JSFiddle的解决方案
HTML:
<div class="wrap_header">
<div class="column">
Name
</div>
<div class="column">
Phone
</div>
<div class="clearfix"></div>
</div>
<div class="wrap_body">
<div class="sliding_wrapper">
<div class="serie">
<div class="cell">
AAAAAA
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
BBBBBB
</div>
<div class="cell">
323232
</div>
<div class="clearfix"></div>
</div>
<div class="serie">
<div class="cell">
CCCCCC
</div>
<div class="cell">
3435656
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
CSS:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}
/**
* @info Clearfix: clear all the floated elements
*/
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {display:inline-table;}
/**
* @hack Display the Clearfix as a block element
* @hackfor Every browser except IE for Macintosh
*/
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
解释:
您有一个包含所有数据的滑动包装器。
注意事项:
.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
有17px的差异，因为我们需要考虑滚动条的宽度。
HTML:
<table id="uniquetable">
<thead>
<tr>
<th> {{ field[0].key }} </th>
<th> {{ field[1].key }} </th>
<th> {{ field[2].key }} </th>
<th> {{ field[3].key }} </th>
</tr>
</thead>
<tbody>
<tr v-for="obj in objects" v-bind:key="obj.id">
<td> {{ obj.id }} </td>
<td> {{ obj.name }} </td>
<td> {{ obj.age }} </td>
<td> {{ obj.gender }} </td>
</tr>
</tbody>
</table>
CSS:
#uniquetable thead{
display:block;
width: 100%;
}
#uniquetable tbody{
display:block;
width: 100%;
height: 100px;
overflow-y:overlay;
overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
width: 100%;
display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
display:table-cell;
width:20% !important;
overflow:hidden;
}
这也可以:
#uniquetable tbody {
width:inherit !important;
display:block;
max-height: 400px;
overflow-y:overlay;
}
#uniquetable thead {
width:inherit !important;
display:block;
}
#uniquetable tbody tr, #uniquetable thead tr {
display:inline-flex;
width:100%;
}
#uniquetable tbody tr td, #uniquetable thead tr th {
display:block;
width:20%;
border-top:none;
text-overflow: ellipsis;
overflow: hidden;
max-height:400px;
}
