CSS Переполнение не работает с селектором таблиц

Question

CSS свойство переполнения у меня не работает выборочно для одной таблицы. Что меня сбивает с толку, так это то, что он отлично работает для селектора таблицы type1, но не может применяться для селектора таблицы type2.

Ниже приведен фрагмент моего CSS скрипта, где я добавляю селектор для таблиц type1 и type2

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;}