htmlの結合でcolspanを指定しているのですが、なぜか結合できません。
html
1 <table id="stable" class="table table-striped table-bordered"> 2 <thead> 3 <tr class=""> 4 <th class="thc1">選択</th> 5 <th class="thc2">部門</th> 6 <th class="thc3" colspan="2">役職</th> 7 <th class="thc4">氏名</th> 8 <th class="thc5">性別</th> 9 <th class="thc6">年齢</th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr class="listData"> 14 <td class="tdc1 checkboxParent"></td> 15 <td class="tdc2 textData"></td> 16 <td class="tdc3 textData"></td> 17 <td class="tdc4 textData"></td> 18 <td class="tdc5 textData"></td> 19 <td class="tdc6 textData"></td> 20 <td class="tdc7 textData"></td> 21 </tr> 22 </tbody> 23 </table> 24
CSS
1main #stable td{ 2 font-size: 1.4rem; 3 height: 2.3em; 4 overflow-wrap : break-word; 5} 6main #stable thead{ 7 width: 100%; 8 display: block; 9} 10main #stable tbody{ 11 width: 100%; 12 height: 28.56em; 13 display: block; 14 overflow-y: scroll; 15 word-wrap: break-word; 16} 17.thc1, .tdc1 { 18 min-width: 4em; 19 max-width: 4em; 20}
tbodyの部分は実際には100行ほど存在しており、jsで各項目に対してデータをセットしています。
javascript
1 case "PartSName": //部門 2 $('#stable tr.listData:eq(' + rowNum + ') td:eq(1)').text(json[i][key]); 3 break; 4 case "PositionCode": //役職コード 5 $('#stable tr.listData:eq(' + rowNum + ') td:eq(2)').text(json[i][key]); 6 break; 7 case "PositionSName": //役職 8 $('#stable tr.listData:eq(' + rowNum + ') td:eq(3)').text(json[i][key]); 9 break; 10 case "MemberName": //氏名 11 $('#stable tr.listData:eq(' + rowNum + ') td:eq(4)').text(json[i][key]); 12 break; 13 case "Sex": //性別 14 $('#stable tr.listData:eq(' + rowNum + ') td:eq(5)').text(json[i][key]); 15 break; 16 case "Age": //年齢 17 $('#stable tr.listData:eq(' + rowNum + ') td:eq(6)').text(json[i][key]); 18 break; 19
CSSの設定のどれかが影響しているのでしょうか?
わかる方がいればアドバイスをいただけると助かります。