0

I have a jsp that has multiple <table> in a page. I want only one particular table to be of fixed height and have a scrollable <tbody> and fixed <thead>.
For that I have written a custom CSS as a class so that I can use it in that paricular table. But its not working.
Here is the CSS:

.scroll-tbody{
    display: block;
    height: 460px;
    overflow-y: auto;
}

And here is the JSP snippet:

<table class="table table-hover table-condensed">
    <thead>
        <tr>
            <td><b>&nbsp &nbsp  Name</b></td>
            <td><b>Phone</b></td>
            <td><b>Total Exp.</b></td>
            <td><b>Location</b></td>
            <td><b>Profile Type</b></td>
            <td><b>Domain</b></td>
            <td><b>Assigned To</b></td>
            <td><b>Status</b></td>
            <td><b>Date</b></td>
        </tr>
    </thead>
    <tbody class="scroll-tbody"> <!-- HERE IS THE CUSTOM CSS FOR SCROLLING -->
    <%
        if(fullList.size()>0)
        {
            Iterator itr = fullList.iterator();
            while(itr.hasNext())
            {
                FileService fs = new FileService();
                File prf = (File)itr.next();
                String prfData = prf.getAbsolutePath() + "#";
                prfData += fs.readData(prf.getAbsolutePath(),"","profiledata");
                prfData = prfData.replace("\\","/");
                String[] data = prfData.split("#");
                String name = data[1].replace("_"," ");
                String phone = data[2];
                String totExp = data[3];
                String location = data[5];
                String prfType = data[6];
                String domain = data[7];
                String assignedTo = data[8];
                String status = data[9];
                String prfDate = data[12];
                prfData = prfData.replace("'","\\'");
                prfData = prfData.replace("\"","\\'");
                prfData = prfData.replace("\r\n","^");
                System.out.println("---->JSP Data: "+prfData+"\n");
                session.setAttribute("dataToEdit",prfData);%>
                <tr>
                    <td><a data-toggle="modal" data-target="#editProfileModal" onClick="getData('<%=prfData%>')"><i class="fa fa-fw fa-file"></i><font size="2"><%=name%></font></a></td>
                    <td><font size="2"><%=phone%></font></td>
                    <td><font size="2"><%=totExp%></font></td>
                    <td><font size="2"><%=location%></font></td>
                    <td><font size="2"><%=prfType%></font></td>
                    <td><font size="2"><%=domain%></font></td>
                    <td><font size="2"><%=assignedTo%></font></td>
                    <td><font size="2"><%=status%></font></td>
                    <td><font size="2"><%=prfDate%></font></td>
                </tr>
        <%  }   
        } %>
    </tbody>
</table>

I dont want to write the CSS like: table{...} thead{...} tbody{...} as it will impact all the tables present in that page.
Am I missing something?
Thanks in advance.

aiman
  • 1,049
  • 19
  • 57

0 Answers0