Как сделать общий заголовок таблицы, если в одном <td> есть <table>?

0

У меня проблема с html-таблицей. Это, казалось бы, базовое формирование HTML-таблицы занимает больше времени, чем ожидалось. У меня есть таблица, где мне нужен общий заголовок с элементами <thead> и <th>. Один из <td> в <tbody> имеет таблицу внутри нее без заголовков.

В подобном случае мне нужен общий заголовок в основном <thead> который выравнивает и формирует в соответствии с основной таблицей, а также <td> в дочерней таблице внутри <td> в основной таблице.

Я попытался использовать <td> внутри <tbody> вместо <thead> для решения этой проблемы и многие другие вещи, такие как ввод фиктивного td в основную таблицу. Это не помогло.

Это требование:

Изображение 174551

Это мой код:

<table  class="table  table-condensed table-hover table-bordered">
<tbody>
    <tr class = "meta">
        <td  widtd = "100px">Metaset&nbsp;</td>
        <td bgcolor="#E3E3ED" widtd = "50PS">Id</td>
        <td bgcolor="#E3E3ED" widtd = "40PX"> Release&nbsp;</td>
        <td bgcolor="#E3E3ED" widtd = "90PX">Component&nbsp;</td>
        <td bgcolor="#E3E3ED" widtd = "40PX">Status&nbsp;</td>
        <td bgcolor="#E3E3ED" widtd = "10px">MBC&nbsp; </td>
        <td bgcolor="#E3E3ED" widtd = "10px">MSC&nbsp;</td>
        <td bgcolor="#E3E3ED" widtd = "10px">IBS&nbsp;</td>
        <td bgcolor="#E3E3ED" widtd = "10px">S0&nbsp;></td>
        <td bgcolor="#CCCCD5" widtd = "140px">Release&nbsp;</td>
        <td bgcolor="#CCCCD5" widtd = "100px">Id&nbsp;</td>
        <td bgcolor="#CCCCD5" widtd = "100px">Family&nbsp;</td>
        <td bgcolor="#CCCCD5" widtd = "40px">Status&nbsp;</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>

         <td bgcolor="#E3E3ED" widtd = "50PS">Id</td>
     <td bgcolor="#E3E3ED" widtd = "40PX"> Release&nbsp;</td>
     <td bgcolor="#E3E3ED" widtd = "90PX">Component&nbsp;</td>
     <td bgcolor="#E3E3ED" widtd = "40PX">Status&nbsp;</td>
     <td bgcolor="#E3E3ED" widtd = "10px">MBC&nbsp; </td>
     <td bgcolor="#E3E3ED" widtd = "10px">MSC&nbsp;</td>
     <td bgcolor="#E3E3ED" widtd = "10px">IBS&nbsp;</td>
     <td bgcolor="#E3E3ED" widtd = "10px">S0&nbsp;></td>

Пожалуйста, помогите мне с этим!

  • 0
    Вы можете создать jsfiddle
  • 0
    Допустимо ли иметь таблицу внутри таблицы?
Показать ещё 2 комментария
Теги:
html-table
angularjs-ng-repeat

2 ответа

0
Лучший ответ

Выполните следующие шаги:

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) Не используйте "thead" для внутренней таблицы, которая находится внутри td, поэтому у вас будет только один заголовок таблицы и с несколькими трюками CSS вы можете сделать его липким заголовком, а внутренние строки будут вертикальными. Это будет потрясающая таблица для отчетности.

Поделиться
0

Как кто-то упомянул об этом, вы должны использовать 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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню