와이드 하단 열이있는 부트 스트랩 html 테이블

Question

나는 그림을 이와 같이 테이블을 만들 필요가있다.

그러나 부트 스트랩 테이블 것이 중요하다, 그래서 그것이 가능 스타일을

table class="table table-striped table-hover" 

를 사용하고자하기 때문에 당신이 그림에서 볼 수는 3 테이블 행,하지 (6)을 가질 수있다?

Answer 1

열 병합 및 ROWSPAN 속성은 트릭을해야한다.

<div class="table-responsive" style='width:50%'> 
    <table class="table table-striped table-hover"> 
     <tr> 
      <td rowspan="3">Name</td> 
      <td>Sex</td> 
      <td>Age</td> 
     </tr> 
     <tr> 
      <td colspan="2">Junmar Jose</td> 
     </tr> 
     <tr> 
      <td colspan="2">Weslie Andrea Lavita</td> 
     </tr> 
     <tr> 
      <td rowspan="3">Name</td> 
      <td>Sex</td> 
      <td>Age</td> 
     </tr> 
     <tr> 
      <td colspan="2">Junmar Jose</td> 
     </tr> 
     <tr> 
      <td colspan="2">Weslie Andrea Lavita</td> 
     </tr> 
    </table> 
</div> 

여기

출력의 스크린 샷입니다 :

이 코드를 시도

이 보여 단지 더미 데이터입니다 어떻게 열과 행이 분리됩니다.

희망이 도움이됩니다. 행운을 빕니다!