右对齐表格页脚 [英] align table footer right
问题描述
我有一个包含数据的表格，我希望第一个页脚项左对齐，其余的右对齐.
以下是预期结果:
table {宽度:100%}<头><tr><th>No</th><th>Nome</th><th>Quantidade</th><th>Preço</th></tr></thead><tr><td>text1</td><td>text2</td><td>text3</td><td>text4</td></tr></tbody><tfoot class="footer"><tr align="left"><td id="cart_voucher" class="cart_voucher"><form action="http://localhost:8080/index.php?controller=order-opc" method="post" id="voucher"><div class="form-group form-group-placeholder"><input type="text" class="discount_name form-control" id="discount_name" name="discount_name" placeholder="Kod rabatowy" value=""><i class="fa fa-angle-right discount_icon" aria-hidden="true"></i><input type="hidden" name="submitDiscount"></表单></td></tr><!-- 结束凭证--><!-- 产品总数--><tr align="right"><td>总产品 </td><td id="total_product">500,00 zł</td></tr><tr align="right"><td 总运费(含税):></td><td id="total_shipping" class="price-opc">12,00 zł</td></tr><tr align="right"><td>总计(不含税):</td><td id="total_price_without_tax" class="price-opc">418,50 zł</td></tr><!-- end 总税不包括.--><!-- 总税金--><tr align="right"><td>总税:</td><td>93,50兹罗提</td></tr><!-- end 总税金--><tr align="right"><td>总计:</td><td><span>512,00 兹罗提</span></td></tr></tfoot></table>
我使用内联 align="left" 作为第一个页脚元素，align="right" 用于其余元素.我得到以下信息:
更新更多说明在页脚中，我们有表单输入和其他数据，表单输入应该在左边，剩下的页脚元素应该在右边，如下图所示.
我尝试对每个 tr 使用 flex-box 但没有任何效果.有人可以帮帮我吗?我只希望页脚中的第一个元素左对齐，其余元素右对齐.谢谢，任何帮助或建议都会有所帮助.忽略thead和tbody，只考虑tfoot.
解决方案 您可以应用 float 属性，为其接受 right 或 left veues
.container {宽度:100%；高度:100px；背景颜色:红色；}.剩下 {向左飘浮;背景颜色:黄色；}.对 {浮动:对；背景颜色:黄色；}
<div class="left">Left Child</div><div class="right">右孩子</div>
这就是属性的工作方式
I have a table which contains data and I want the first footer item to be aligned left and the remaining ones to be aligned right.
Here is expected results:
table {
width: 100%
}
<table class="price-list">
<thead>
<tr>
<th>No</th>
<th>Nome</th>
<th>Quantidade</th>
<th>Preço</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>
</tbody>
<tfoot class="footer">
<tr align="left">
<td id="cart_voucher" class=" cart_voucher">
<form action="http://localhost:8080/index.php?controller=order-opc" method="post" id="voucher">
<div class="form-group form-group-placeholder">
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" placeholder="Kod rabatowy" value="">
<i class="fa fa-angle-right discount_icon" aria-hidden="true"></i>
<input type="hidden" name="submitDiscount">
</div>
</form>
</td>
</tr>
<!-- end VOUCHER -->
<!-- Total products -->
<tr align="right">
<td>Total products </td>
<td id="total_product">500,00 zł</td>
</tr>
<tr align="right">
<td Total shipping (tax incl.):>
</td>
<td id="total_shipping" class="price-opc">12,00 zł</td>
</tr>
<tr align="right">
<td>Total (tax excl.):</td>
<td id="total_price_without_tax" class="price-opc">418,50 zł</td>
</tr>
<!-- end Total tax excl. -->
<!-- Total tax -->
<tr align="right">
<td>Total tax:</td>
<td>93,50 zł</td>
</tr>
<!-- end Total tax -->
<tr align="right">
<td>Total:</td>
<td>
<span>512,00 zł</span>
</td>
</tr>
</tfoot>
</table>
I used inline align="left" for first footer element and align="right"for the remaining ones. I get the following:
UPDATE more explanation
In a footer we have form input and other data , form input should be left and the remaining footer element should be right as image describe below
I tried using flex-box for each tr but nothing worked. Can someone please help me? I just want the first element in the footer to align left and the rest to align right. Thanks, any help or suggestions will be helpful. Ignore thead and tbody, just consider tfoot.
解决方案 You can apply float attribute for which accept right or left velues
.container {
width: 100%;
height: 100px;
background-color: red;
}
.left {
float: left;
background-color: yellow;
}
.right {
float: right;
background-color: yellow;
}
<div class="container">
<div class="left">Left Child</div>
<div class="right">Right Child</div>
</div>
This is how the attribute is work
这篇关于右对齐表格页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆