The trick was to wrap the table and then overflow the div. Below is the solution i have used to resolve the issue.

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

CSS overflow property does not work for me selectively for one table.
What is baffling me is it perfectly works for type1 table selector but fails to apply for type2 table selector.

Below is snippet of my CSS script, where i am adding selector for table type1 and 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;
}

Below code loads either table type1 or type2 based on data from back-end code with declared class selectors type1 and type2 respectively.

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>

All the other CSS properties are getting applied to both type1 and type2 tables. Except for the overflow css property.