我想用下面的代码片段演示我的问题:



.container {
  border: 2px solid blue;
}

.content {
  border: 2px solid red;
}

.footer {
  border: 2px solid green;
}

<table border="1" width="50%">
  <tr>

    <td class="container">

      <div class="content">
        <table border="1" width="100%">
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>

        </table>
      </div>

      <div class="footer">
        <table border="1" width="100%">
          <tr>
            <td>
              This is a footer
            </td>
          </tr>
        </table>
      </div>

    </td>

    <td class="container">

      <div class="content">

        <table border="1" width="100%">
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
          <tr>
            <td>
              table cell
            </td>
          </tr>
        </table>

      </div>

      <div class="footer">

        <table border="1" width="100%">
          <tr>
            <td>
              This is a footer
            </td>
          </tr>
        </table>

      </div>

    </td>

  </tr>

</table>





我有一个表格,其中的单元格(蓝色)被另一个表格(红色)和页脚(绿色)动态填充。红色表可以包含可变数量的单元格。我想将绿色页脚放在蓝色单元格的底部,但是我不知道如何完成此操作。我无法将content-div设置为相同的高度,因为它们的内容是可变的。我应该如何尝试解决这个问题?非常抱歉的例子很抱歉。

问候

最佳答案

我不知道我是否能得到您的帮助,但我希望这对您有帮助

尝试这个



    $('.container').each(function(e){
    	$(this).css({
      	    'height': $(this).height() + $(this).find('.footer').height() + 'px'
        })
    })

.container{
        border: 2px solid blue;
        position: relative;
    }

    .content{
        border: 2px solid red;
    }

    .footer{
        border: 2px solid green;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" width="50%">
  <tr>

    <td class="container">

      <div class="content">
        <table border="1" width="100%">
          <tr>
            <td >
              table cell
            </td>
          </tr>
          <tr>
            <td >
              table cell
            </td>
          </tr>

        </table>
      </div>

      <div class="footer">
        <table border="1" width="100%">
          <tr>
            <td >
              This is a footer
            </td>
          </tr>
        </table>
      </div>

    </td>

      <td class="container">

        <div class="content">

          <table border="1" width="100%">
            <tr>
              <td>
                table cell
              </td>
            </tr>
            <tr>
              <td >
                table cell
              </td>
            </tr>
            <tr>
              <td >
                table cell
              </td>
            </tr>
             <tr>
              <td >
                table cell
              </td>
            </tr>
             <tr>
              <td >
                table cell
              </td>
            </tr>
          </table>

         </div>

         <div class="footer">

           <table border="1" width="100%">
             <tr>
               <td >
                 This is a footer
               </td>
             </tr>
           </table>

         </div>

      </td>

  </tr>

</table>





这是这样做的一种方式。还有更多“优雅”的方法,但是您将不得不重新考虑您的结构。

关于html - 动态填充表格单元格时如何将div放置在表格单元格的底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57624594/

10-09 19:14
查看更多