DIV внутри <tr>блок

Question

Я хочу добавить блок <div></div> внутри блока <tr> после окончания блоков <td>.Но это переходит к таблице выше.Например, я хочу сделать это.

    <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 plane progress bar here stating the completion of the work done.</div>
             <div class="textStatus">209133 left    444444 teams</div>
          </div>
        </tr>
    </table>

Но <div></div> перемещается в верхнюю часть таблицы.В любом случае, я могу это сделать?Также я использую 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
}

Answer 1

Нижний колонтитул для каждого <tr>, как это?

.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
}

<table class="table">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
    </tr>
    <tr>
      <td colspan="4">
        <div class="progressInfo">
         <div class="progressBar">A horizontal plane progress bar here stating the completion of the work done.</div>
         <div class="textStatus">209133 left    444444 teams</div>
      </div>
      </td>
     </tr>
    <tr>
      <td>Info 1</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>
      </tr>
     <tr>
      <td colspan="4">
        <div class="progressInfo">
         <div class="progressBar">A horizontal plane progress bar here stating the completion of the work done.</div>
         <div class="textStatus">209133 left    444444 teams</div>
      </div>
      </td>
     </tr>
      
</table>

Answer 2

Добавление тега div внутри тега tr не имеет никакого смысла.Возможно, вам придется добавить div в тег td

Answer 3

Вы можете сделать что-то вроде ниже:

<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>
    </tr>
    <tr>
      <td colspan="4">
        <div class="progressInfo">
           <div class="progressBar">A horizontal plane progress bar here stating the completion of the work done.</div>
           <div class="textStatus">209133 left    444444 teams</div>
        </div>
      </td>
    </tr>
</table>

Answer 4

вам нужно сделать новую строку <tr> и добавить colspan="4" к тд

.table {
border-collapse: collapse;
}

.table>tbody>tr
 {
  vertical-align: middle;
  border-bottom: 1px solid red;
}

<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>

    </tr>
    <tr>
          <td colspan="4">
      <div class="progressInfo">
         <div class="progressBar">A horizontal plane progress bar here stating the completion of the work done.</div>
         <div class="textStatus">209133 left    444444 teams</div>
      </div>
      </td>
    </tr>
        <tr>
      <td>Info 1</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>

    </tr>
        <tr>
          <td colspan="4">
      <div class="progressInfo">
         <div class="progressBar">A horizontal plane progress bar here stating the completion of the work done.</div>
         <div class="textStatus">209133 left    444444 teams</div>
      </div>
      </td>
    </tr>
</table>

Answer 5

Как это?

<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>
  </tr>
  <tr>
    <td colspan="4">
      <div class="progressInfo">
        <div class="progressBar">A horizontal plane progress bar here stating the completion of the work done.</div>
        <div class="textStatus">209133 left 444444 teams</div>
      </div>
    </td>
  </tr>
</table>