隐藏和显示 html 表格列

【问题标题】：Hide and show html table columns隐藏和显示 html 表格列
【发布时间】：2021-03-25 01:41:58
【问题描述】：

任何人都可以帮助解决这个 html/javaScript 问题吗？我想实现一个解决方案来隐藏/显示我的 html 表中的列，该表具有多行的标题，当我开始从右侧隐藏列时它工作正常，但是当我从左侧开始时，我可以看到问题;即使不需要，有些单元格也会被隐藏，这是我的代码 thatnks：

$(function() {
 
  // on init
  $('.hide-column').eq(0).trigger( "click" );
  
   // on click
  $('.hide-column').click(HideColumns)
  
  function HideColumns() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    var colIndex = 0;
    var colSpan = 0;

    $cell.parent().children().each(function(index) {
      if ($(this).is($cell)) {
        colSpan = parseInt($cell.attr("colspan") || 1);
        return false;
      } else {
        colIndex += parseInt($(this).attr("colspan") || 1);
      };
    });

    // find and hide col index
    for (var i = colIndex; i < (colIndex + colSpan); i++) {
      $table.find("tbody tr, thead :nth-child(4)")
        .children(":nth-child(" + (i + 1) + ")")
        .addClass('hide-col');
    };
    
    //always show first header
    $table.find("thead :nth-child(1)").children().removeClass('hide-col');
    
    //hide clicked cell
    $cell.addClass('hide-col');

    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})
body, html {
  height: 100%;
  overflow: hidden;
    }

#right {
  height: 100%;
    }

table, th, td {
border: 1px solid black;  // changing-colors
// word-wrap: break-word;

}

tr:first-child {
  font-weight: normal;
}

tr:nth-child(even) {background: #eef}  // changing-colors
tr:nth-child(odd) {background: #fee}   // changing-colors

* {
  box-sizing: border-box;
}



#myTable {
  border-collapse: separate;
  border: 1px solid #ddd;  // changing-colors
  width: 100%;
  margin-top: 18px;
  // Remove the // in front of the below two lines, to get fixed-width
  // table-layout: fixed;
  // word-wrap: break-word;
   font-size: 10.5px;
   font-family: arial;
     
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}


#myTable tr {
  border-bottom: 1px solid #ddd;  // changing-colors
}

#myTable tr:first-child:hover, #myTable tr:hover {
  #background-color: Greylight;    // changing-colors
}

#myTable tr:first-child {
  background-color: #FFFFFF;    // changing-colors
  font-weight: bold;
}

.table-fixed {
  width: 100%;
}

/*This will work on every browser*/
 .table-fixed thead  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0;
    z-index: 999;
    background-color: #ddd;
    color: black;
}

thead tr:nth-child(1) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(2) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 30px;
    z-index: 999;
    background-color: teal;
    color: black;
}
thead tr:nth-child(3) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 66px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(4) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 110px;
    z-index: 999;
    background-color: white;
    color: black;
}

.tscroll {
  width: 100%;
  height: 80%;
  overflow-x: scroll;
  overflow-y: scroll;
  margin-bottom: 10px;
  
}

.tscroll table td:first-child {
  position: sticky;
  left: 0;
  background-color: #FFFFFF;
  font-weight: bold;
}

.tscroll td, .tscroll th {
  //border-bottom: dashed #888 1px;
}



th.yellow {
  background: #DAA520;
  color: white;
}

th.bluesky {
  background: #B0E0E6;
  color: black;
}

th.skyblue  {
  background: #87CEEB;
  color: black;
}

th.blue  {
  background: #4682B4;
  color: black;
}

th.NO {
  background: white;
  color: black;
}

th.green {
  background: #40A497;
  color: black;
}
 
th.pink {
  background: #FFC0CB;
  color: black;
}
th.darkcyan {
  background: #008B8B;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  bottom:0;
  width:100%;
  overflow: hidden;

}

li {
 // float: left;
 // border-right:1px solid #bbb;
}

li:last-child {
 // border-right: none;

}

li a {
 // display: BLOCK;
 // color: black;
 // text-align: center;
 // padding: 12px ;
 // text-decoration: none;
//  font-size: 12px;
//  line-height:0.8;
}


body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}



.tscroll  th:first-child {
  overflow-x: auto;
  position: sticky;
  left: 0;
  //parent opacity: 100%;
  z-index: 1000;

}

.red {color:red}
.orange {color:orange}
.green {color:green}

/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<title>QoR_results_summary</title>

<style type="text/css">

</style>
</head>
<body>
<br>
<br>

<img align="left" src="logo.jpg" height="8%" width="auto" hspace="50"> 
</br>    
</br>
</br>
</br>

 
<div class="tscroll">
<table id="myTable" class="table-fixed">
<thead>
<tr>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>


<th colspan="44">IMP</th>
</tr>
<tr>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="darkcyan" colspan="43">SYN</th>

</tr>
<tr>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="NO" >&nbsp;</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>DC</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>COUNT</th>
<th class="lightgray" colspan="3">AREA  </th>
<th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>STP (ns)</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>HLD </th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>GATE</th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>CONG</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>DFT</th>
<th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>POWER (mW) </th>
<th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>DDD</th>
<th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>THRESHOLD</th>
<th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>RUNTIME</th>

</tr>
<tr>
<th class="NO">B</th>

<th>DA</th>
<th>D</th>
<th>F</th>
<th>E</th>
<th>WA</th>
<th>UNC</th>
<th>TAL</th>
<th>BF</th>
<th>IV</th>
<th>SE</th>
<th> AEA</th>
<th> AEA</th>
<th> AA</th>

<th> S</th>
<th> NP</th>
<th> TNS</th>

<th> W</th>
<th> EP</th>
<th> S</th>

<th> WS</th>
<th> NEP</th>
<th> TNS</th>

<th> W</th>
<th> NP</th>
<th> TN</th>

<th>OTHERS</th>
<th>OTHERS </th>
<th>OTHERS </th>

<th>WS</th>
<th>NV</th>
<th>TS</th>
<th>%GT</th>
<th>%OVF</th>
<th>CU</th>
<th>%SD</th>
<th> PWR</th>
<th> PER</th>
<th> PER</th>
<th> POER</th>
<th>TRS</th>
<th>CP</th>

<th>C1</th>
<th>C2</th>
<th>C3</th>

<th>TIME</th>

</tr>
</thead>
            
<tr>
<td>SRL</td>
<td>Nov/9/2020</td>
<td>----</td>
<td>NULL</td>
<td><a href=""><p datasdc-color="0">0</p></a></td>
<td><a href=""><p sdcwarn-color="1619">1619</p></a></td>
<td><a href=""><p datasdc-color="0">0</p></a></td>
<td>814764</td>
<td>50858</td>
<td>94615</td>
<td>174834</td>
<td>2351399</td>
<td><a href="">2873882</a></td>
<td><a href="">8900320</a></td>
<td><a href=""><p dataswns-color="-1.26">-1.26</p></a></td>
<td><a href=""><p datafenep-color="277">277</p></a></td>
<td><a href="">-22.62</a></td>
<td><a href=""><p dataswns-color="-0.46">-0.46</p></a></td>
<td><a href=""><p datafenep-color="42">42</p></a></td>
<td><a href="">-5.77</a></td>
<td><a href=""><p dataswns-color="-0.09">-0.09</p></a></td>
<td><a href=""><p datafenep-color="56">56</p></a></td>
<td><a href="">-0.30</a></td>
<td><a href=""><p dataswns-color="0.00">0.00</p></a></td>
<td><a href=""><p datafenep-color="0">0</p></a></td>
<td><a href="">0.00</a></td>
<td><a href=""><p dataswns-color="-3.24">-3.24</p></a></td>
<td><a href=""><p datafenep-color="41">41</p></a></td>
<td><a href="">-35.94</a></td>
<td><a href=""><p datahwns-color="-11.57">-11.57</p></a></td>
<td><a href=""><p datafenep-color="2426">2426</p></a></td>
<td><a href="">-1341.85</a></td>
<td><a href="">91.17%</a></td>
<td><a href="">">Map</a></td>
<td><a href="">0.16</a>/<a href="">Map</a></td>
<td>NULL</td>
<td>28.20</td>
<td>17.79</td>
<td>52.60</td>
<td><p datap-color="98.59">98.59</p></td>
<td><a href=""><p datadrv-color="877">877</p></a></td>
<td><a href="">34</a></td>
<td><a href=""><p dataulvt-color="0.19">0.19</p></a></td>
<td><a href="">3.52</a></td>
<td><a href="">96.29</a></td>
<td>12h:04m:03s</td>
</tr>

    <tfoot class="footer-restore-columns">
 <tr>
    <th colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>
    
    </table>    

</body>

</html>

【问题讨论】：

    标签： javascript html web scripting


    【解决方案1】：

    看起来像是 CSS 问题。如果您将.hide-col 更改为使用display: none;，它可以正常工作。不幸的是，使用其他方法隐藏表格单元格会导致它们与其他行不对齐。在动画结束后设置display: none，还是可以用jQuery实现动画的。

    在这个例子中，代码也做了轻微的调整，更新了很宽的列的colspan（使用类bigcolspan）：https://jsfiddle.net/apecgwh9/1/

    $(function() {
 
  // on init
  $('.hide-column').eq(0).trigger( "click" );
  
   // on click
  $('.hide-column').click(HideColumns);
  
  $('.bigcolspan').each(function(index) {
    $(this).data('colspan', $(this).attr('colspan'));
  });
  
  function HideColumns() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    var colIndex = 0;
    var colSpan = 0;

    $cell.parent().children().each(function(index) {
      if ($(this).is($cell)) {
        colSpan = parseInt($cell.attr("colspan") || 1);
        return false;
      } else {
        colIndex += parseInt($(this).attr("colspan") || 1);
      };
    });

    // find and hide col index
    for (var i = colIndex; i < (colIndex + colSpan); i++) {
      $table.find("tbody tr, thead :nth-child(4)")
        .children(":nth-child(" + (i + 1) + ")")
        .addClass('hide-col');
    };
    
    //adjust colspan of top rows
    $('.bigcolspan').each(function(index) {
        $(this).attr('colspan', parseInt($(this).attr('colspan'))-colSpan);
    });
    
    //always show first header
    $table.find("thead :nth-child(1)").children().removeClass('hide-col');
    
    //hide clicked cell
    $cell.addClass('hide-col');

    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

    $('.bigcolspan').each(function(index) {
        $(this).attr('colspan', $(this).data('colspan'));
    });
  })


  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})
    body, html {
  height: 100%;
  overflow: hidden;
    }

#right {
  height: 100%;
    }

table, th, td {
border: 1px solid black;  // changing-colors
// word-wrap: break-word;

}

tr:first-child {
  font-weight: normal;
}

tr:nth-child(even) {background: #eef}  // changing-colors
tr:nth-child(odd) {background: #fee}   // changing-colors

* {
  box-sizing: border-box;
}



#myTable {
  border-collapse: separate;
  border: 1px solid #ddd;  // changing-colors
  width: 100%;
  margin-top: 18px;
  // Remove the // in front of the below two lines, to get fixed-width
  // table-layout: fixed;
  // word-wrap: break-word;
   font-size: 10.5px;
   font-family: arial;
     
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}


#myTable tr {
  border-bottom: 1px solid #ddd;  // changing-colors
}

#myTable tr:first-child:hover, #myTable tr:hover {
  #background-color: Greylight;    // changing-colors
}

#myTable tr:first-child {
  background-color: #FFFFFF;    // changing-colors
  font-weight: bold;
}

.table-fixed {
  width: 100%;
}

/*This will work on every browser*/
 .table-fixed thead  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0;
    z-index: 999;
    background-color: #ddd;
    color: black;
}

thead tr:nth-child(1) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 0px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(2) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 30px;
    z-index: 999;
    background-color: teal;
    color: black;
}
thead tr:nth-child(3) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 66px;
    z-index: 999;
    background-color: white;
    color: black;
}
thead tr:nth-child(4) th  {
    position: sticky;
    position: -webkit-sticky;   
    top: 110px;
    z-index: 999;
    background-color: white;
    color: black;
}

.tscroll {
  width: 100%;
  height: 80%;
  overflow-x: scroll;
  overflow-y: scroll;
  margin-bottom: 10px;
  
}

.tscroll table td:first-child {
  position: sticky;
  left: 0;
  background-color: #FFFFFF;
  font-weight: bold;
}

.tscroll td, .tscroll th {
  //border-bottom: dashed #888 1px;
}



th.yellow {
  background: #DAA520;
  color: white;
}

th.bluesky {
  background: #B0E0E6;
  color: black;
}

th.skyblue  {
  background: #87CEEB;
  color: black;
}

th.blue  {
  background: #4682B4;
  color: black;
}

th.NO {
  background: white;
  color: black;
}

th.green {
  background: #40A497;
  color: black;
}
 
th.pink {
  background: #FFC0CB;
  color: black;
}
th.darkcyan {
  background: #008B8B;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  bottom:0;
  width:100%;
  overflow: hidden;

}

li {
 // float: left;
 // border-right:1px solid #bbb;
}

li:last-child {
 // border-right: none;

}

li a {
 // display: BLOCK;
 // color: black;
 // text-align: center;
 // padding: 12px ;
 // text-decoration: none;
//  font-size: 12px;
//  line-height:0.8;
}


body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}



.tscroll  th:first-child {
  overflow-x: auto;
  position: sticky;
  left: 0;
  //parent opacity: 100%;
  z-index: 1000;

}

.red {color:red}
.orange {color:orange}
.green {color:green}

/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
    <!DOCTYPE html>
<html>

  <head>

    <script src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" charset="ISO-8859-1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <title>QoR_results_summary</title>

    <style type="text/css">

    </style>
  </head>

  <body>
    <br>
    <br>

    <img align="left" src="logo.jpg" height="8%" width="auto" hspace="50">
    </br>
    </br>
    </br>
    </br>


    <div class="tscroll">
      <table id="myTable" class="table-fixed">
        <thead>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>


            <th class="bigcolspan" colspan="43">IMP</th>
          </tr>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="bigcolspan darkcyan" colspan="43">SYN</th>

          </tr>
          <tr>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="NO">&nbsp;</th>
            <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>DC</th>
            <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>COUNT</th>
            <th class="lightgray" colspan="3">AREA</th>
            <th class="lightgray" colspan="15"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>STP (ns)</th>
            <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>HLD </th>
            <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>GATE</th>
            <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>CONG</th>
            <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>DFT</th>
            <th class="lightgray" colspan="4"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>POWER (mW) </th>
            <th class="lightgray" colspan="2"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>DDD</th>
            <th class="lightgray" colspan="3"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>THRESHOLD</th>
            <th class="lightgray" colspan="1"><button class="pull-right btn btn-default hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
                <i class="fa fa-eye-slash"></i>
              </button>RUNTIME</th>

          </tr>
          <tr>
            <th class="NO">BLOCK</th>

            <th>DATE</th>
            <th>DIR</th>
            <th>FLV</th>
            <th>ERR</th>
            <th>WARN</th>
            <th>UNCLK</th>
            <th>TOTAL</th>
            <th>BUF</th>
            <th>INV</th>
            <th>SEQ</th>
            <th> AREA</th>
            <th> AREA</th>
            <th> AREA</th>

            <th> WNS</th>
            <th> NVEP</th>
            <th> TNS</th>

            <th> WNS</th>
            <th> NVEP</th>
            <th> TNS</th>

            <th> WNS</th>
            <th> NVEP</th>
            <th> TNS</th>

            <th> WNS</th>
            <th> NVEP</th>
            <th> TNS</th>

            <th>OTHERS WNS</th>
            <th>OTHERS NVEP</th>
            <th>OTHERS TNS</th>

            <th>WHS</th>
            <th>NVEP</th>
            <th>THS</th>
            <th>%GTR</th>
            <th>%OVRF</th>
            <th>CRU</th>
            <th>%SCND</th>
            <th> POWER</th>
            <th> POWER</th>
            <th> POWER</th>
            <th> POWER</th>
            <th>TRNS</th>
            <th>CAP</th>

            <th>C1</th>
            <th>C2</th>
            <th>C3</th>

            <th>TIME</th>

          </tr>
        </thead>

        <tr>
          <td>SRL</td>
          <td>Nov/9/2020</td>
          <td>----</td>
          <td>NULL</td>
          <td><a href="">
              <p datasdc-color="0">0</p>
            </a></td>
          <td><a href="">
              <p sdcwarn-color="1619">1619</p>
            </a></td>
          <td><a href="">
              <p datasdc-color="0">0</p>
            </a></td>
          <td>814764</td>
          <td>50858</td>
          <td>94615</td>
          <td>174834</td>
          <td>2351399</td>
          <td><a href="">2873882</a></td>
          <td><a href="">8900320</a></td>
          <td><a href="">
              <p dataswns-color="-1.26">-1.26</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="277">277</p>
            </a></td>
          <td><a href="">-22.62</a></td>
          <td><a href="">
              <p dataswns-color="-0.46">-0.46</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="42">42</p>
            </a></td>
          <td><a href="">-5.77</a></td>
          <td><a href="">
              <p dataswns-color="-0.09">-0.09</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="56">56</p>
            </a></td>
          <td><a href="">-0.30</a></td>
          <td><a href="">
              <p dataswns-color="0.00">0.00</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="0">0</p>
            </a></td>
          <td><a href="">0.00</a></td>
          <td><a href="">
              <p dataswns-color="-3.24">-3.24</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="41">41</p>
            </a></td>
          <td><a href="">-35.94</a></td>
          <td><a href="">
              <p datahwns-color="-11.57">-11.57</p>
            </a></td>
          <td><a href="">
              <p datafenep-color="2426">2426</p>
            </a></td>
          <td><a href="">-1341.85</a></td>
          <td><a href="">91.17%</a></td>
          <td><a href="">">Map</a></td>
          <td><a href="">0.16</a>/<a href="">Map</a></td>
          <td>NULL</td>
          <td>28.20</td>
          <td>17.79</td>
          <td>52.60</td>
          <td>
            <p datap-color="98.59">98.59</p>
          </td>
          <td><a href="">
              <p datadrv-color="877">877</p>
            </a></td>
          <td><a href="">34</a></td>
          <td><a href="">
              <p dataulvt-color="0.19">0.19</p>
            </a></td>
          <td><a href="">3.52</a></td>
          <td><a href="">96.29</a></td>
          <td>12h:04m:03s</td>
        </tr>

        <tfoot class="footer-restore-columns">
          <tr>
            <th class="bigcolspan" colspan="50"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
          </tr>
        </tfoot>

      </table>

  </body>

</html>

    【讨论】：

    • 非常感谢您的支持，它工作正常
    猜你喜欢
    • 1970-01-01
    • 2010-10-02
    • 2011-02-20
    • 1970-01-01
    • 1970-01-01
    • 2011-12-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode