我的主表是下面第2个表的第5,6列（bug）我需要添加一个标题＆amp; 7,8,9列另一个标题（不是bug）。
对于第二个表我已应用排序功能，因此无法在该表标题中添加新行，我需要添加排序和标题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>
答案 0 :(得分：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>