CSS溢出不适用于表选择器

Question

CSS溢出属性对我来说不适用于一个表。让我困惑的是，它完全适用于type1表选择器，但无法应用于type2表选择器。

下面是我的CSS脚本片段，我在其中添加了表类型1和类型2 的选择器

CSS

table.type1, table.type2 {
font-family: Arial, Helvetica, sans-serif;
border: 3px solid #0EB491;
background-color: #f9f9f9;
text-align: center;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
max-height: 250px;
max-width: 250px;
overflow: auto;
}
table.type1 td, table.type1 th, table.type2 td, table.type2 th {
border: 1px solid #BA2227;
padding: 3px 2px;
}
table.type1 tbody td, table.type2 tbody td {
font-size: 13px;
}
table.type1 thead, table.type2 thead {
background: #0EB491;
border-bottom: 0px solid #444444;
}
table.type1 thead th, table.type2 thead th{
font-size: 14px;
font-weight: bold;
color: #F0F0F0;
border-left: 2px solid #24943A;
}

下面的代码分别使用声明的类选择器type1和type2基于后端代码中的数据加载表type1或type2。

JSP

<c:if test="${not empty profileListType1}">
<table id="type1" class="type1">
<thead>
<tr>
<th>ON (sec)</th>
<th>OFF (sec)</th>
<th>Cycles (sec)</th>
</tr>
</thead>
<c:forEach items="${profileListType1}" var="profile">
<tr>
<td>${profile.onTime}</td>
<td>${profile.offTime}</td>
<td>${profile.cycles}</td>
</tr>
</c:forEach>
</table>
</c:if>
<c:if test="${not empty profileListType2}">
<table id="type2" class="type2">
<thead>
<tr>
<th>Attenuation (dB)</th>
<th>Duration (sec)</th>
</tr>
</thead>
<c:forEach items="${profileListType2}" var="profile">
<tr>
<td>${profile.attenuation}</td>
<td>${profile.duration}</td>
</tr>
</c:forEach>
</table>
</c:if>

所有其他CSS属性都应用于type1和type2表。除了溢出的css属性。

Answer 1

诀窍是包装表，然后使div溢出。下面是我用来解决这个问题的解决方案。

JSP

<c:if test="${not empty profileListType1}">
<div id="type1" class="table-wrapper">
<div class="table-scroll">
<table>
<thead>
<tr>
<th>ON (sec)</th>
<th>OFF (sec)</th>
<th>Cycles (sec)</th>
</tr>
</thead>
<c:forEach items="${profileListType1}" var="profile">
<tr>
<td>${profile.onTime}</td>
<td>${profile.offTime}</td>
<td>${profile.cycles}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</c:if>
<c:if test="${not empty profileListType2}">
<div id="type2" class="table-wrapper">
<div class="table-scroll">
<table>
<thead>
<tr>
<th>Attenuation (dB)</th>
<th>Duration (sec)</th>
</tr>
</thead>
<c:forEach items="${profileListType2}" var="profile">
<tr>
<td>${profile.attenuation}</td>
<td>${profile.duration}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</c:if>

CSS

.table-wrapper {
font-family: Arial, Helvetica, sans-serif;    
position:relative;
width: 100%;
}
.table-wrapper table {
width:100%;
height:100%;  
}
.table-scroll {
margin: auto;
max-height: 260px;
max-width:335px;
overflow:auto;
margin-top:1px;
border: 3px solid #0EB491;
}
table td, table th {
border: 1px solid #BA2227;
padding: 3px 2px;
}
table tbody td {
font-size: 13px;
}
table thead {
background: #0EB491;
border-bottom: 0px solid #444444;
}
table thead th{
font-size: 14px;
font-weight: bold;
color: #F0F0F0;
border-left: 2px solid #24943A;
}
table thead {position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0px; z-index: 2;}