Set the table width
I have a table where the header and data are created randomly.. I have introduced the scroll also for the data alone but header is not matching the data.. As the alignment is not getting set.. Please do help
My code goes like this
<%--
Document : Reports
Created on : May 6, 2011, 3:12:45 PM
Author : shaiji.babu
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page import ="com.hclt.panaroma.dashboard.dao.ReportDAONew,com.hclt.panaroma.dashboard.wrapper.HostsandDBQuery,com.hclt.panaroma.dashboard.wrapper.Unix"%>
<%@ page import ="java.util.ArrayList,java.util.Hashtable,java.util.Enumeration"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href='${pageContext.request.contextPath}/styles/main.css' />
<link rel="stylesheet" type="text/css" href='${pageContext.request.contextPath}/styles/error_tables.css' />
</head>
<body>
<table class=ruled width="200px" >
<%
String host = request.getParameter("hostID");
String selectedMetrics = request.getParameter("metricId");
String[] Columns = selectedMetrics.split(",");
String rad_val = request.getParameter("selectedRadio");
String startDate = request.getParameter("startDate");
String endDate = request.getParameter("endDate");
String finalTime = null;
String timeStamp = null;
ReportDAONew reportDAO = new ReportDAONew();
int tableHeaderLength = Columns.length + 1;
if (rad_val.equalsIgnoreCase("host")) {
ArrayList<Unix> myResults = (ArrayList<Unix>) reportDAO.getHostsMetrics1(host, selectedMetrics, startDate, endDate);
if (myResults.size() < 1) {%>
<tr>
<td height="20px" style="text-align: center;color: red; border-collapse: collapse;font-size: larger;font-weight: bold">NO MATCHING RECORDS FOUND</td>
</tr>
<% } else {%>
<caption align="left" style="color: gray"/>HostMeasure <br><br>
<tr>
<td colspan="<%=tableHeaderLength%>" >
<div id="reportTable" >
<table width="100%" style="border-collapse: collapse ">
<tr>
<td height="35px" style='background-color:#138399; color: white;'>
<div align="center" style="width: 50px" >
<b>TimeStamp</b>
</div>
</td>
<% for (int i = 0; i < Columns.length; i++) {%>
<td height="35px" style='background-color:#138399; color: white;'>
<div align="center" style="width: 50px" >
<b> <%= Columns[i]%></b>
</div>
</td>
<%}%>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td >
<div id="reportTable" style="overflow: auto;height: 400px;border: aqua">
<table border="2px" width="100%" style="border-collapse: collapse ">
<% for (Unix objUnix : myResults) {%>
<tr>
<%
if (objUnix.getTime_stamp() != null) {
timeStamp = objUnix.getTime_stamp();
finalTime = timeStamp.substring(0, timeStamp.length() - 5);
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="left" style="width: 120px" >
<%=finalTime%>
</div>
</td>
<% }
for (int i = 0; i < Columns.length; i++) {
if (Columns[i].equalsIgnoreCase("phymem_util")) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getPhymem_util()%>
</div></td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("Top1ProcessCPU") && objUnix.getTop1ProcessCPU() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getTop1ProcessCPU()%>
</div>
</td>
<%}%>
<%if (Columns[i].equalsIgnoreCase("Top2ProcessCPU") && objUnix.getTop2ProcessCPU() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' >
<div align="center" style="width: 120px" >
<%= objUnix.getTop2ProcessCPU()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("Top3ProcessCPU") && objUnix.getTop3ProcessCPU() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getTop3ProcessCPU()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("OpenFilesCount") && objUnix.getOpenFilesCount() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getOpenFilesCount()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("Top1Process") && objUnix.getTop1Process() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getTop1Process()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("Top2Process") && objUnix.getTop2Process() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getTop2Process()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("Top3Process") && objUnix.getTop3Process() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getTop3Process()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("UserCPU") && objUnix.getUserCPU() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getUserCPU()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("SystemCPU") && objUnix.getSystemCPU() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getSystemCPU()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("cpuutil") && objUnix.getCpuutil() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="left" style="width: 120px" >
<%= objUnix.getCpuutil()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("InBytesPerSec") && objUnix.getInBytesPerSec() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getInBytesPerSec()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("OutBytesPerSec") && objUnix.getOutBytesPerSec() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getOutBytesPerSec()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("HDA_1_Util") && objUnix.getHDA_1_Util() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getHDA_1_Util()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("HDA_2_Util") && objUnix.getHDA_2_Util() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getHDA_2_Util()%>
</div>
</td>
<%
}%>
<%if (Columns[i].equalsIgnoreCase("HDA_3_Util") && objUnix.getHDA_3_Util() != null) {
%>
<td style='background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none'>
<div align="center" style="width: 120px" >
<%= objUnix.getHDA_3_Util()%>
</div>
</td>
<%
}
}%>
开发者_如何学运维 </tr>
<%}%>
</table>
</div>
</td>
</tr>
<% }
} else if (rad_val.equalsIgnoreCase("hostAndComp")) {
ReportDAONew reportDAO1 = new ReportDAONew();
ArrayList<HostsandDBQuery> myresult1 = reportDAO1.getReportValues(host, startDate, endDate);
if (myresult1.size() < 1) {
%>
<tr>
<td height="20px" style="text-align: center;color: red; border-collapse: collapse;font-size: larger;font-weight: bold">NO MATCHING RECORDS FOUND</td>
</tr>
<%} else {%>
<caption align="left" style="color: gray">Host And UserCount Measure</caption>
<tr>
<td colspan="16">
<div id="reportTable" style="overflow: auto;height: 400px">
<table width="70%" style="border-collapse: collapse ">
<tr class=head>
<td width="400px" align='center'><B>Day_time</B></td>
<td style='width:100px' align='center'><B>Concurrent Users</B></td>
<td style='width:100px' align='center'><B>Active Users(5Min)</B></td>
<td style='width:100px' align='center'><B>Currently Logged</B></td>
<td style='width:100px' align='center'><B>Current Anonymous Users</B></td>
<td style='width:200px' align='center'><B>CPU Utilization(%)</B></td>
<td style='width:200px' align='center'><B>Physical Mem Utilization(%)</B></td>
<td style='width:200px' align='center'><B>User CPU(%)</B></td>
<td style='width:200px' align='center'><B>System CPU(%)</B></td>
<td style='width:200px' align='center'><B>Open Files Count</B></td>
<td style='width:200px' align='center'><B>Top1Process</B></td>
<td style='width:200px' align='center'><B>Top1 ProcessCPU</B></td>
<td style='width:200px' align='center'><B>Top2Process</B></td>
<td style='width:200px' align='center'><B>Top2 ProcessCPU</B></td>
<td style='width:200px' align='center'><B>Top3Process</B></td>
<td style='width:200px' align='center'><B>Top3 ProcessCPU</B></td>
</tr>
<%
for (HostsandDBQuery objHostDBQry : myresult1) {
timeStamp = objHostDBQry.getTime_stamp();
if (timeStamp.length() > 0) {
finalTime = timeStamp.substring(0, timeStamp.length() - 5);
}
%>
<tr >
<td style='width:400px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= finalTime%></td>
<td style='width:100px; background-color:#CCFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getConcurrent_users()%></td>
<td style='width:100px; background-color:#CCFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getActive_users()%></td>
<td style='width:100px; background-color:#CCFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getCurrently_logged_users()%></td>
<td style='width:220px; background-color:#CCFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getCurrent_anonymous_users()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getCpuutil()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getPhymem_util()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getUserCPU()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getSystemCPU()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getOpenFilesCount()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getTop1Process()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getTop1ProcessCPU()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getTop2Process()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getTop2ProcessCPU()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getTop3Process()%></td>
<td style='width:220px; background-color:#98F5FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; COLOR: #000000; TEXT-DECORATION:none' align='center'>
<%= objHostDBQry.getTop3ProcessCPU()%></td>
</tr>
<% }%>
</table>
</div>
</td>
</tr>
<%
}
%>
<%
}
%>
</table>
</body>
</html>
Now I am able to get the header and data correctly, but it is disturbing the page... The width of the page is getting extended.
If I understand it correctly, you actually have 2 tables. One containing the table headers (let's call it headerTable) and one containing the table data (let's call it dataTable).
If this is the case, then you will have to write some custom javascript logic that loops through the cells of the first row in the dataTable. Retrieve the actual width of each cell and set this width in the corresponding header cell in your headerTable.
Something like this:
function resizeHeaders(dataTableFirstRowCells, headerTableCells)
{
for (var i=0; i<dataTableFirstRowCells.length; i++)
{
var cell = $(headers[i]);
var renderedWidth = cell.getWidth(); // 'getWidth' might be different depending on which (and if) js framework you use)
$(headerTableCells[i]).setWidth(renderedWidth);
}
}
加载中,请稍侯......
精彩评论