如何根据表格高度设置div的位置

  • Z时代
  • 2024-01-10
  • 分类：问答

我制作了一个表格，其中的行是动态插入的，然后当表格高度增加时，由于行数更多，div不显示我在表格下面创建div div我没有设置位置一个div的时候增加表格的高度div会自动在表格下面？ 这里是我的代码：如何根据表格高度设置div的位置

<div id="table"> 
<table class="table table-bordered"> 
<thead> 
<tr> 
<th>Description</th> 
<th>Quantity</th> 
<th>Price</th> 
<th>Total</th>    
</tr> 
</thead> 
<tbody> 
{% for invoice in invoices %} 
<tr> 
<td style="color:black;">{{ invoice.description }}</td> 
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td> 
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td> 
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td> 
</tr> 
{% endfor %} 
</tbody> 
</table> 
</div> 
<div style="width:243px; height:67px; float:right; margin:0px 215px 0; border:1px solid black;"> 
<h5>&nbsp;Invoice Total(USD)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{invoiceamount}}</h5> 
<h5>&nbsp;Paid to date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{paidamount}}</h5> 
<div class="horizontalRule2" runat="server"></div> 
<h5>&nbsp;Invoice Total(USD)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{balanceamount}}</h5> 
</div>

这里是表CSS：

#table{ 
float: right; 
height: 110px; 
margin: 4px 215px 0; 
width: 686px; 
}

这里的截图，我想见下表格显示：

回答：

尝试清除格＃表或总计的div下面是：

div#table { 
    clear:both; 
}

回答：

我想在这个我想你应该坚持使用这两个单元格的表格，因为它们是列表数据的一部分。

这意味着你可以你只需要添加他们在

<div id="table"> 
<table class="table table-bordered"> 
<thead> 
<tr> 
<th>Description</th> 
<th>Quantity</th> 
<th>Price</th> 
<th>Total</th>    
</tr> 
</thead> 
<tbody> 
{% for invoice in invoices %} 
<tr> 
<td style="color:black;">{{ invoice.description }}</td> 
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td> 
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td> 
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td> 
</tr> 
{% endfor %} 
<td colspan="3" style="text-align:right;"><h5>Invoice Total(USD)</h5></td> 
<td style="text-align:right;"><h5>{{invoiceamount}}</h5></td> 
<td colspan="3" style="text-align:right;"><h5>Paid to date(USD)</h5></td> 
<td style="text-align:right;"><h5>{{balanceamount}}</h5></td> 
</tbody> 
</table> 
</div>

以上是 如何根据表格高度设置div的位置 的全部内容， 来源链接： utcz.com/qa/261954.html

回到顶部