Question

我遇到了html表的问题。这种看似基本的HTML表格形成的时间比预期的要长。我有一个表格，我需要一个包含<thead>和<th>元素的公共标题。 <td>中的一个<tbody>在其中有一个没有标题的表。

在这种情况下，我需要在主<thead>中使用一个公共标题根据主表中的对齐和形式以及主表中<td>内的子表中的<td>。

我尝试使用{{ 1}}在<td>内部而不是<tbody>来解决这个问题以及许多其他事情，例如在主表中引入虚拟td。它没有帮助。

这是要求：

Requirement

这是我的代码：

<thead>

基本上您看到的以下标题适用于<table class="table table-condensed table-hover table-bordered"> <tbody> <tr class = "meta"> <td widtd = "100px">Metaset </td> <td bgcolor="#E3E3ED" widtd = "50PS">Id</td> <td bgcolor="#E3E3ED" widtd = "40PX"> Release </td> <td bgcolor="#E3E3ED" widtd = "90PX">Component </td> <td bgcolor="#E3E3ED" widtd = "40PX">Status </td> <td bgcolor="#E3E3ED" widtd = "10px">MBC  </td> <td bgcolor="#E3E3ED" widtd = "10px">MSC </td> <td bgcolor="#E3E3ED" widtd = "10px">IBS </td> <td bgcolor="#E3E3ED" widtd = "10px">S0 ></td> <td bgcolor="#CCCCD5" widtd = "140px">Release </td> <td bgcolor="#CCCCD5" widtd = "100px">Id </td> <td bgcolor="#CCCCD5" widtd = "100px">Family </td> <td bgcolor="#CCCCD5" widtd = "40px">Status </td> </tr> </tbody> <tbody ng-repeat="(metaset, ids) in metasetHashSplit"> <tr class = "meta"> <td rowspan = 100 width = "100px"><strong>{{metaset}}</strong></td> </tr> <tr class = "meta" ng-repeat="item in ids" > <td width = "800px"> <table class="table child table-hover table-bordered " > <tr ng-repeat="buy in item.Buy > <td width = "50px"> {{buy.BuyId}}</span></td> <td width = "40px">{{buy.BuyRelease}}</span></td> <td width = "90px">{{buy.BuyComponentAffected}}</td> <td width = "40px">{{buy.BuyStatus}}</span></td> <td width = "10px"><span style="color:red">{{buy.MBC}}</span></td> <td width = "10px"><span style="color:red">{{buy.MSC}}</span></td> <td width = "10px"><span style="color:red">{{buy.IBS}}</span></td> <td width = "10px"><span style="color:red">{{buy.S0}}</span></td> </tr> </table> </td> <td width = "140px"><strong>{{item.release}}</span></td> <td width = "100px"><strong>{{item.Id}}</span></td> <td width = "100px"><strong>{{item.family}}</span></td> <td width = "40px"><strong>{{item.status}}</span></td> </tr>

<td>

中的表格。请帮助我解决此问题！

Answer 1

按照以下两个步骤进行操作：

1）使用表格标题创建表格标题和

<th colspan="3">    </th>

用于合并标题中的单元格。

<thead>
<tr>
<th colspan="4">Group A
</th>
</tr>

<thead>
<tr>
  <th>ID</th>
  <th>Release</th>
  <th>Component</th>
  <th>Status</th>
 </tr>

2）不要在td内部的内部表中使用“thead”，因此你只有一个表头，并且有一些CSS技巧你可以使它成为粘性标题，内部行将是垂直滚动。这将是一个很棒的报告表。

Answer 2

正如有人提到的那样，你必须使用colspan，你应该能够完成它。

th{
    height: 50px;
    vertical-align: top;
}

<table  class="table  table-condensed table-hover table-bordered" border='1'>
<thead>
    <tr>
        <td>Metaset</td>
        <td colspan = '4'>Group A</td> 
        <td colspan='4'>Alerts Looking Up</td>   
        <td colspan = '5'>Group B</td>
    </tr>
    <tr class = "meta">
        <th>&nbsp;</th>
        
        <th bgcolor="#E3E3ED" widtd = "50PS">Id</th>
        <th bgcolor="#E3E3ED" widtd = "40PX"> Release&nbsp;</th>
        <th bgcolor="#E3E3ED" widtd = "90PX">Component&nbsp;</th>
        <th bgcolor="#E3E3ED" widtd = "40PX">Status&nbsp;</th>
        
        <th>S0</th><th>S1</th><th>S2</th><th>S3</th>
        
        <th bgcolor="#CCCCD5" widtd = "140px">Release&nbsp;</th>
        <th bgcolor="#CCCCD5" widtd = "100px">Id&nbsp;</th>
        <th bgcolor="#CCCCD5" widtd = "100px">Family&nbsp;</th>
        <th bgcolor="#E3E3ED" widtd = "90PX">Component&nbsp;</th>
        <th bgcolor="#CCCCD5" widtd = "40px">Status&nbsp;</th>
    </tr>
</thead>
</table>

如何在其中包含公共表头时创建公共表头？

2 个答案: