3번재 세트

말로 설명이 어렵군요 이거

3번째 세트 가로 1,2,3,4 에는 rowspan이 있고 그 다음 세트는 11,22,33,44,55 는 없네요.

1,2,3,4,11,22,33,44,55 가 캡쳐의 표처럼 나오는게 맞다면, 구조적으로는

한 tr 안에 td로 나열만 되어야할듯하네요.

캡쳐이미지라서 다 쳐보긴 힘들어서 코드를 붙여보여드리진 못하겠습니다.ㅋ

@배강민 

구글에서 다른 분들 코드보고 tr이 두개로 나눠지면 보이긴 정확한것 같지만

내부는 틀렸다는 것을 알았습니다.

<table id="ncTable" class="table table-hover table-striped" border="1">
           <thead>
             <tr>
               <th rowspan="2">aa</th>
               <th rowspan="2">bb</th>
               <th rowspan="2">cc</th>
               <th rowspan="2">dd</th>
               <th colspan="5">ee</th>
             </tr>
             <tr>
               <th>a</th>
               <th>b</th>
               <th>c</th>
               <th>d</th>
               <th>e</th>
             </tr>

           </thead>
           <tbody>
             <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
               <td>4</td>
               <td>11</td>
               <td>22</td>
               <td>33</td>
               <td>44</td>
               <td>55</td>
             </tr>

           </tbody>
       </table>

근데 이제 rowspan="3" 이 되는 부분이 문제네요..

이렇게 오른쪽 에 2개 이상의 행이 들어갈때가 문제입니다.

rowspan 이나 colspan 을 쓸 때는 쓰지 않는 부분과의 아귀를 잘 맞춰야 하지 않을까요?

올려주신 걸 보니.. 

</tr> 이 빠진 곳도 보이고,

마지막엔 <tr>...</tr> 이 통으로 빠진 것 같네요.

<table border="1">
  <thead>
    <tr>
        <th rowspan="2">rowspan=2</th>
        <th rowspan="2">rowspan=2</th>
        <th rowspan="2">rowspan=2</th>
        <th rowspan="2">rowspan=2</th>
        <th colspan="5">colspan=5</th>
    </tr>
    <tr>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td rowspan="3">rowspan=3</td>
        <td rowspan="3">rowspan=3</td>
        <td rowspan="3">rowspan=3</td>
        <td rowspan="3">rowspan=3</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
    </tr>
    <tr>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
  </tbody>
</table>

@하늘치

코드 그대로 저장해서 보시면(올려주신대로 해봤습니다.)

소팅할때 데이터들이 이상해지는데 이건 라이브러리 상 어쩔수 없는 건가요?

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

   <div class="row">
     <div class="col-md-12">
       <table id="ncTable" class="table table-hover table-striped" border="1">
         <thead>
    <tr>
        <th rowspan="2">rowspan=2</th>
        <th rowspan="2">rowspan=2</th>
        <th rowspan="2">rowspan=2</th>
        <th rowspan="2">rowspan=2</th>
        <th colspan="5">colspan=5</th>
    </tr>
    <tr>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td rowspan="3">rowspan=3</td>
        <td rowspan="3">rowspan=3</td>
        <td rowspan="3">rowspan=3</td>
        <td rowspan="3">rowspan=3</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
    </tr>
    <tr>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
  </tbody>
       </table>
     </div>
   </div>

<script type="text/javascript">
  $(function(){
    $('#ncTable').DataTable();
  });
</script>

보통 표 형태에서 소팅이 제대로 되려면 모든 셀의 크기가 동일해야 하지 않을까요? 

엑셀에서 비슷한 예를 만들어 테스트해보시면 바로 이해가 되지 않을까 싶습니다..