1. 首页
  2. 问答
  3. 设置表格宽度

设置表格宽度

2011-05-23 101 views
1

我有一个表格，其中的标题和数据是随机创建的。我已经为数据单独引入了滚动，但标题与数据不匹配。由于对齐方式没有设置..请确实有助于设置表格宽度

我的代码是这样

<%-- 
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>

现在我能正确地获得头和数据，但它扰乱了网页...页面的宽度得到扩展。

来源

2011-05-23 Rachel

+0

后的代码。 – 2011-05-23 09:05:57

+0

你能否粘贴你的代码？ – vkrams 2011-05-23 09:07:51

+0

你绝对应该干掉那些代码！你是那些复制/粘贴主人之一？ :) 如果您还可以添加生成的html代码，它可能会更容易。 – TweeZz 2011-05-23 10:25:13

回答

0

如果我理解正确，你实际上有2个表。一个包含表头（我们称之为headerTable），另一个包含表数据（我们称之为dataTable）。

如果是这种情况，那么您将不得不编写一些自定义JavaScript逻辑，它可以循环访问dataTable中第一行的单元格。检索每个单元格的实际宽度，并在headerTable的相应标题单元格中设置此宽度。

事情是这样的：

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

来源

2011-05-23 09:14:24 TweeZz

相关问题

 相关问题