时间戳

首页 > 解决方案 > 块内的 DIV

jquery - 块内的 DIV

问题描述

我想在块结束后在<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>转移到了榜首。我有什么办法可以做到这一点？另外，我正在使用引导程序。

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
}

标签： jqueryhtmlcsstwitter-bootstrapbootstrap-4

解决方案

你需要创建一个新行<tr>并添加colspan="4"到 td

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

推荐阅读