如何创建一个带有固定标题的可滚动表格,其宽度应该是自动的?

时间:2017-04-26 04:08:17

标签: javascript php jquery html css

我有一个包含70多列的表,宽度不能定义为只有用户更新数据。

我需要标题位置:固定并与表格正确对齐。标题和表格都应该可以垂直滚动。水平。重要的是宽度:自动

以下是html& css编码无法将所有代码添加为一个巨大的表。我尽可能多地搜索过。无法一次找到这三个要求的解决方案。希望有人能给我一个解决方案。

table {
  z-index: 1;
  table-layout: auto;
}

table thead {
  margin: 0 auto;
  background-color: #cecece;
  z-index: 1;
  height: 37px;
}

td,
th {
  width: 1px;
  white-space: nowrap;
}  

HTML

<html>
<table width="100%" border="1" cellpadding="10" cellspacing="0" style="font-size:11px; font-family:verdana;">

  <thead>
    <tr>
      <!--1-->
      <th>Site ID</th>
      <!--2-->
      <th>Site Name</th>
      <!--3-->
      <th>Site Address</th>
      <!--4-->
      <th>Project Type</th>
      <!--5-->
      <th>Implementation Requested Date </th>
      <!--6-->
      <th>Target Completion Date</th>
      <!--7-->
      <th>Vendor</th>
      <!--8-->
      <th>ESR No</th>
      <!--9-->
      <th>Contact Details</th>
      <!--10-->
      <th>Engineer</th>
      <!--11-->
      <th>Account Manager</th>
      <!--12-->
      <th>Sent to Contractors for Quotation</th>
      <!--13-->
      <th>Expected Date</th>
      <!--14-->
      <th>SO Approval for JFS Requested</th>
      <!--15-->
      <th>Expected Date</th>
      <!--16-->
      <th>SO Approval for JFS Received</th>
      <!--17-->
      <th>Expected Date</th>
      <!--18-->
      <th>JFS Done</th>
      <!--19-->
      <th>Expected Date</th>
      <!--20-->
      <th>Drawing Submited OFN to SAQ</th>
      <!--21-->
      <th>Expected Date</th>
      <!--22-->
      <th>SO Approval for Drawing</th>
    </tr>

  </thead>

  <?php
    //$i = 1;
    while ($fiberexcel=mysqli_fetch_assoc($records)){
        $A1=$fiberexcel['SiteID0']; //1
        $A2=$fiberexcel['SiteName1'];   //2
        $A3=$fiberexcel['SiteAddress2'];    //3
        $A4=$fiberexcel['ProjectType3'];    //4
        $ReqDate4=$fiberexcel['ReqDate4'];  //5
        $A6=$fiberexcel['TargetDate5']; //6
        $A7=$fiberexcel['Vendor6']; //7
        $A8=$fiberexcel['ESRNo7'];  //8
        $A9=$fiberexcel['Contact8'];    //9
        $A10=$fiberexcel['Engineer9'];  //10
        $A11=$fiberexcel['AM10'];   //11
        $A12=$fiberexcel['Quotation11'];
        $test=$fiberexcel['test input text']; //12
        $A13=$fiberexcel['ExpectDateQuotation12'];  //13
        $ApprovalJFSRequest13=$fiberexcel['ApprovalJFSRequest13'];  //14
        $A15=$fiberexcel['ExpectDateJFSRequest14']; //15
        $ApprovalJFSReceived15=$fiberexcel['ApprovalJFSReceived15'];    //16
        $A17=$fiberexcel['ExpectDateJFSReceived16'];    //17
        $JFSDone17=$fiberexcel['JFSDone17'];    //


    echo "<form action=Display.php method=post>";
    //echo "<tr>";
    echo "<td>"  .$fiberexcel['SiteID0'] ." </td>";
    echo "<td>"  .$fiberexcel['SiteName1'] ." </td>";
    echo "<td>"  .$fiberexcel['SiteAddress2'] ." </td>";

    </table>

0 个答案:

没有答案