DIV内部块

Question

我希望在<div></div>块结束后在<tr>块中添加<td>块。但它转移到上表。例如，我想这样做。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是<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>并将colspan="4"添加到td

＆＃13;

＆＃13;

.table {
border-collapse: collapse;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

喜欢这个？

wp_update_post()

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 标记内添加 div 标记没有任何意义。您可能必须在 td 标记

中添加div部分

Answer 5

这样的每个<tr>的页脚？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;