我面临的问题，而设置高度宽度溢出滚动。
<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。
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;
}
另一种方法是将表格包装在一个可滚动的元素中，并将标题单元格设置为固定在顶部。
这种方法的优点是不需要更改主体上的显示，可以让浏览器来计算列宽，同时保持标题单元格宽度与数据单元格列宽度一致。
/* Set a fixed scrollable wrapper */
.tableWrap {
height: 200px;
border: 2px solid black;
overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
position: sticky;
top: 0;
}
/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
border-collapse: collapse;
}
/* Because we must set sticky on th,
we have to apply background styles here
rather than on thead */
th {
padding: 16px;
padding-left: 15px;
border-left: 1px dotted rgba(200, 209, 224, 0.6);
border-bottom: 1px solid #e8e8e8;
background: #ffc491;
text-align: left;
/* With border-collapse, we must use box-shadow or psuedo elements
for the header borders */
box-shadow: 0px 0px 0 2px #e8e8e8;
}
/* Basic Demo styling */
table {
width: 100%;
font-family: sans-serif;
}
table td {
padding: 16px;
}
tbody tr {
border-bottom: 2px solid #e8e8e8;
}
thead {
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
background: #e6f7ff;
}
<div class="tableWrap">
<table>
<thead>
<tr>
<th><span>Month</span></th>
<th>
<span>Event</span>
</th>
<th><span>Action</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>February. An extra long string.</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>March</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>April</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>May</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>June</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>July</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>August</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>September</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>October</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>November</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
<tr>
<td>December</td>
<td>AAA</td>
<td><span>Invite | Delete</span></td>
</tr>
</tbody>
</table>
</div>
