Bootstrap Table Row Bad Sizing - html

Question

I can't correctly format a table using Bootstrap. I checked this code many times, and I don't know why it doesn't look correct.
<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

You're code seems to be working fine aside from the th inside tbody which has been closed by a td tag. made a correction on the html code to fix that. Another thing to check is there might be another styling rules that seems to override your table styling. you can try to disable other stylesheet and just leave bootstrap to see if it will fix your issues.
Below is a working demo of your table.
<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>