2017-05-23 13 views
0

私のメインテーブルは、5,6列目(バグ)の下の2番目のテーブルです。私はヘッダを追加する必要があります& 7,8,9カラム別のヘッダ(バグではありません)。2つの異なるテーブルを整列する方法

iはソート機能がので、テーブルヘッダに新たな行を追加することができない適用した第二テーブルに対して、iが

をソートしてヘッダを作成する方法 sample screenshot

を追加する並べ替えとヘッダ必要

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="css/sorttable.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <table class="w3-table w3-striped w3-bordered w3-border w3-hoverable w3-white tabthree"> 
 

 
    <thead> 
 
     <tr class="action-yes"> 
 
     <td colspan="5"></td> 
 
     <td colspan="2"><b>Application Issues (bugs)</b></td> 
 
     <td colspan="3"><b>Test issues (Not bugs)</b></td> 
 
     <td></td> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 

 

 
    <table class="w3-table w3-striped w3-bordered w3-border w3-hoverable w3-white sortable"> 
 

 
    <thead> 
 

 
     <th style="width: 10px;"> 
 
     <div align="center" ;>Job</div> 
 
     </th> 
 
     <th style="width: 10px;">Success <br /># 
 
     </th> 
 
     <th style="width: 10px;">Failed <br /># 
 
     </th> 
 
     <th style="width: 10px;">Skipped <br /># 
 
     </th> 
 
     <th style="width: 10px;">Total <br /># 
 
     </th> 
 
     <th style="width: 10px;">New <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Known <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Env <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Data <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Test <br />Issues 
 
     </th> 
 
     <th style="width: 10px;"><br />Comments</th> 
 

 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
    </table> 
 

 
</body> 
 

 
</html>

+3

あなたがそれらを整列させたい場合は、なぜ彼らは別々のテーブルです。 2つのテーブルをテーブルに置くことはできますか? –

+0

2番目のテーブルにソート機能がありますhttps://www.kryogenix.org/code/browser/sorttable/sorttable.js、もし2つのテーブルの並びをテーブルヘッダにマージすれば、 –

+0

あなたのテーブルAとあなたのソート可能なテーブルの両方を別のテーブル。最終的には、それらが重複して列セットを共有することを望みます。 –

答えて

0

私は、2つの別々のテーブルを持っているだけのものを使用して、COLSPAN

ません

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="css/sorttable.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <table class="w3-table w3-striped w3-bordered w3-border w3-hoverable w3-white tabthree"> 
 

 
    <thead> 
 

 
     <tr class="action-yes"> 
 
     <th colspan="5"></td> 
 
     <th colspan="2"><b>Application Issues (bugs)</b></td> 
 
     <th colspan="3"><b>Test issues (Not bugs)</b></td> 
 
     <th colspan="1"></td> 
 
     </tr> 
 

 
     <tr> 
 
     <th style="width: 10px;"> 
 
     <div align="center" ;>Job</div> 
 
     </th> 
 
     <th style="width: 10px;">Success <br /># 
 
     </th> 
 
     <th style="width: 10px;">Failed <br /># 
 
     </th> 
 
     <th style="width: 10px;">Skipped <br /># 
 
     </th> 
 
     <th style="width: 10px;">Total <br /># 
 
     </th> 
 
     <th style="width: 10px;">New <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Known <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Env <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Data <br />Issues 
 
     </th> 
 
     <th style="width: 10px;">Test <br />Issues 
 
     </th> 
 
     <th style="width: 10px;"><br />Comments</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
    </table> 
 

 
</body> 
 

 
</html>

+0

上記のメインテーブルのソート機能は「https://www.kryogenix.org/code/browser/sorttable/sorttable.js」です。このjsを使用してテーブルをソートしています。並べ替えが削除され、私は並べ替えが必要と2つのヘッダーが整列、 –

関連する問題