부트 스트랩 테이블 행 불량 크기 조정

Question

부트 스트랩을 사용하여 테이블을 올바르게 포맷 할 수 없습니다. 나는이 코드를 여러 번 확인해 보았고 왜 올바르게 보이지 않는지 모르겠습니다.

<table class="table table-striped table-bordered"> 
    <thead> 
     <th>#</th> 
     <th>Mecz</th> 
     <th>Liga</th> 
     <th>Kurs</th> 
     <th>Data Rozpoczęcia</th> 
    </thead> 
    <tbody> 
     <tr data-toggle="collapse" data-target="#accordion" class="clickable"> 
      <th scope="row"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
      <td>Test</td> 
     </tr> 
     <tr> 
      <td colspan="3" style="padding: 0px;"> 
       <div id="accordion" class="collapse" style="padding: 5px;">Hidden</div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

코드가 td 태그로 닫혀있는 tbody 안쪽에서 잘 작동하는 것 같습니다. HTML 코드를 수정하여이를 수정했습니다. 확인해야 할 또 다른 사항은 테이블 스타일을 무시하는 다른 스타일 규칙이있을 수 있다는 것입니다. 다른 스타일 시트를 사용하지 않도록 설정하고 부트 스트랩을 그대로 두어 문제를 해결할 수 있는지 확인할 수 있습니다.

다음은 테이블의 데모입니다. 당신은``와``닫으려고하고 있기 때문에

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<table class="table table-striped table-bordered"> 
 
    <thead> 
 
     <th>#</th> 
 
     <th>Mecz</th> 
 
     <th>Liga</th> 
 
     <th>Kurs</th> 
 
     <th>Data Rozpoczęcia</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr data-toggle="collapse" data-target="#accordion" class="clickable"> 
 
      <td scope="row"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></td> 
 
      <td>Test</td> 
 
      <td>Test</td> 
 
      <td>Test</td> 
 
      <td>Test</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="3" style="padding: 0px;"> 
 
       <div id="accordion" class="collapse" style="padding: 5px;">Hidden</div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>