我有一个带有可滚动tbody的表格。问题是为了使滚动起作用,我将tbody的显示设置为块状,这反过来会弄乱表格布局。
<div align="center">
<table class="sampleTable">
<thead>
<tr>
<th class="centerAlign" colspan="3">
<b>HEADER</b>
</th>
</tr>
<tr>
<th class="centerAlign">COLUMN 1</th>
<th class="centerAlign">COLUMN 2</th>
<th class="centerAlign">COLUMN 3</th>
</tr>
</thead>
<tbody class="scroll">
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
<a href="google.com">DATA</a>
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
</tbody>
</table>
</div>
以下是CSS代码:
table {
border-collapse: collapse;
clear: both;
}
table.sampleTable {
border: 0;
width: 60%;
height: 90%;
}
td {
font-weight: normal;
font-family: arial;
font-size: 13px;
color: #222222;
line-height: 18px;
border-top: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}
td.centerAlign {
text-align: center;
}
th.centerAlign {
text-align: center;
}
/* Scrollable tbody. */
tbody.scroll {
overflow: scroll;
height: 100px;
width: 100%;
}
表格如下所示,不会滚动:
![Without block display](https://istack.dev59.com/1DqvN.webp)
tbody.scroll {
overflow: scroll;
height: 100px;
width: 100%;
display: block;
}
thead {
display:block;
}
现在的样子是这样的。
是否可能使tbody滚动,而不会影响表格的外观和感觉?