153、表格栏固定

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <title>new document</title>
  <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript">
      function FixTable(TableID, FixColumnNumber, width, height) {
          if ($("#" + TableID + "_tableLayout").length != 0) {
              $("#" + TableID + "_tableLayout").before($("#" + TableID));
              $("#" + TableID + "_tableLayout").empty();
          }
          else {
              $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
          }
          $('<div id="' + TableID + '_tableFix"></div>'
          + '<div id="' + TableID + '_tableHead"></div>'
          + '<div id="' + TableID + '_tableColumn"></div>'
          + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
          var oldtable = $("#" + TableID);
          var tableFixClone = oldtable.clone(true);
          tableFixClone.attr("id", TableID + "_tableFixClone");
          $("#" + TableID + "_tableFix").append(tableFixClone);
          var tableHeadClone = oldtable.clone(true);
          tableHeadClone.attr("id", TableID + "_tableHeadClone");
          $("#" + TableID + "_tableHead").append(tableHeadClone);
          var tableColumnClone = oldtable.clone(true);
          tableColumnClone.attr("id", TableID + "_tableColumnClone");
          $("#" + TableID + "_tableColumn").append(tableColumnClone);
          $("#" + TableID + "_tableData").append(oldtable);
          $("#" + TableID + "_tableLayout table").each(function () {
              $(this).css("margin", "0");
          });
          var HeadHeight = $("#" + TableID + "_tableHead thead").height();
          HeadHeight += 2;
          $("#" + TableID + "_tableHead").css("height", HeadHeight);
          $("#" + TableID + "_tableFix").css("height", HeadHeight);
          var ColumnsWidth = 0;
          var ColumnsNumber = 0;
          $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
              ColumnsWidth += $(this).outerWidth(true);
              ColumnsNumber++;
          });
          ColumnsWidth += 2;
          if ($.browser.msie) {
              switch ($.browser.version) {
                  case "7.0":
                      if (ColumnsNumber >= 3) ColumnsWidth--;
                      break;
                  case "8.0":
                      if (ColumnsNumber >= 2) ColumnsWidth--;
                      break;
              }
          }
          $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
          $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
          $("#" + TableID + "_tableData").scroll(function () {
              $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
              $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
          });
          $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
          $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
          $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
          $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
          if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
              $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
              $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
          }
          if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
              $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
              $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
          }
          $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
          $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
          $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
          $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
      }
      $(document).ready(function () {
          FixTable("MyTable", 2, 800, 400);
      });
  
  </script>
  </head>
  <body>
   <table
    style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left- color: black"
    id="MyTable" border="1" cellspacing="0" cellpadding="0">
    <thead>
     <tr>
      <th style="text-align: center; width: 80px" >姓名</th>
      <th style="text-align: center; width: 80px" >班级</th>
      <th style="text-align: center; width: 80px">语文</th>
      <th style="text-align: center; width: 80px">数学</th>
      <th style="text-align: center; width: 80px">英语</th>
      <th style="text-align: center; width: 80px">政治</th>
      <th style="text-align: center; width: 80px">历史</th>
      <th style="text-align: center; width: 80px">地理</th>
      <th style="text-align: center; width: 80px">物理</th>
      <th style="text-align: center; width: 80px">化学</th>
      <th style="text-align: center; width: 80px">生物</th>
      <th style="text-align: center; width: 80px">生物</th>
     </tr>
    </thead>
    <tbody>
     <!-- 数据行 -->
     <tr>
      <td>学生学生学生学生学生学生学生学生学生学生学生学生学生学生</td>
      <td>班级1</td>
      <td>29safafafasfasdf</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
     <tr>
      <td>学生32</td>
      <td>班级1</td>
      <td>29</td>
      <td>25</td>
      <td>146</td>
      <td>28</td>
      <td>79</td>
      <td>73</td>
      <td>47</td>
      <td>8</td>
      <td>91</td>
      <td>526</td>
     </tr>
    </tbody>
   </table>
  </body>
  </html>
99999
猜你喜欢
