gpt4 book ai didi

javascript - 想要创建发票,其中列 (td) 将使用相同的宽度删除或​​动态添加

转载 作者:太空宇宙 更新时间:2023-11-04 06:05:54 24 4
gpt4 key购买 nike

我想创建一个可以动态添加或删除(列)的发票。

在第一张发票中,我有 5 列 (td),在第二张发票中,我有 8 列 (),所以这两种情况我都需要使用 100% 宽度,因为 A4 纸张尺寸,因为我想打印这张发票。

如您所知,表格 td 可以增加或减少,所以我想调整一列中额外增加/减少的宽度,其他列的宽度将固定。

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}

th,td {
border: 1px solid black;
}

table.d {
table-layout: fixed;
width: 100%;
}
</style>
</head>
<body>


<table class="d">
<tr>
<th>Name</th>
<th>Item details</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Tax</th>
</tr>
<tr>
<td>Bulb </td>
<td>Lorem ipsum dollar</td>
<td>1</td>
<td>21</td>
<td>23</td>
<td>2</td>
</tr>

</table>

</body>
</html>

请同时检查此屏幕截图:- tried to explain by image

最佳答案

您可以为列设置固定宽度,并使用 :not(.className) 选择器排除需要填充额外空间的列。

table {
border-collapse: collapse;
border: 1px solid black;
}

th,td {
border: 1px solid black;
}

table.d {
table-layout: fixed;
width: 100%;
}

th:not(.fill-width),
td:not(.fill-width) {
width:70px;
overflow:hidden;
}
<table class="d">
<tr>
<th>Name</th>
<th class="fill-width">Item details</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Amount</th>
<th>Tax</th>
</tr>
<tr>
<td>Bulb </td>
<td class="fill-width">Lorem ipsum dollar</td>
<td>1</td>
<td>21</td>
<td>23</td>
<td>2</td>
</tr>
</table>

关于javascript - 想要创建发票,其中列 (td) 将使用相同的宽度删除或​​动态添加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56865142/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com