I'm having trouble adding a <div></div> block inside a <tr> block after the end of the <td> blocks. The issue is that it keeps shifting to above the table structure. Here's an example of what I want to achieve:
<table class="table">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Info 1</td>
<td>Info 2</td>
<td>Info 3</td>
<td>Info 4</td>
<div class="progressInfo">
<div class="progressBar">A horizontal progress bar indicating the completion of work.</div>
<div class="textStatus">209133 left 444444 teams</div>
</div>
</tr>
</table>
I'm looking for a way to ensure the <div></div> stays within the table row without being misplaced. Any suggestions on how I can achieve this? Also, just to note, I am using Bootstrap.
CSS
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
vertical-align: middle;
border-top: 1px solid #eee
}