在 a 中嵌套表以匹配外部表
[英]nesting table inside a <td> to match the <th> of outside table
问题描述
table, th, td { border: 1px solid black; }
<html> <table style="border:1px solid;"> <thead> <tr> <th rowspan="2">Type</th> <th colspan="2">Client</th> <th rowspan="2">Currency</th> <th rowspan="2">Amount</th> <th rowspan="2">Monthly Total</th> <th rowspan="2">Yearly Total</th> </tr> <tr> <th>Name</th> <th>Id</th> </tr> </thead> <tbody> <tr> <td>Customer</td> <td colspan="4"> <table style="width:100%"> <tr> <td>Client A</td> <td>1234</td> <td>USD</td> <td>200</td> </tr> <tr> <td>Client B</td> <td>5678</td> <td>USD</td> <td>200</td> </tr> </table> </td> <td>300</td> <td>500</td> </tr> <tr> <td>Vendor</td> <td colspan="4"> <table> <tr> <td>Client C</td> <td>5678</td> <td>GBP</td> <td>100</td> </tr> </table> </td> <td>300</td> <td>500</td> </tr> </tbody> </table> </html>
我必须实现上述结构，但我无法对齐内表以匹配外表的宽度。 尝试了很多事情，但无法做到。 有人可以帮我吗？
所以我有两个 *ngFor 嵌套，第一个用于外部表 tbody，第二个用于内部表的一行。
2 个解决方案
解决方案1
1 2021-02-11 14:40:32
你应该嵌套桌子吗？ 我会改用 rowspan 否则你的表结构在语义上不正确
table, th, td { border: 1px solid black; }
<html> <table style="border:1px solid;"> <thead> <tr> <th rowspan="2">Type</th> <th colspan="2">Client</th> <th rowspan="2">Currency</th> <th rowspan="2">Amount</th> <th rowspan="2">Monthly Total</th> <th rowspan="2">Yearly Total</th> </tr> <tr> <th>Name</th> <th>Id</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Customer</td> <td>Client A</td> <td>1234</td> <td>USD</td> <td>200</td> <td rowspan="2">300</td> <td rowspan="2">500</td> </tr> <tr> <td>Client B</td> <td>5678</td> <td>USD</td> <td>200</td> </tr> <tr> <td>Vendor</td> <td>Client C</td> <td>5678</td> <td>GBP</td> <td>100</td> <td>300</td> <td>500</td> </tr> </tbody> </table> </html>
解决方案2
0 2021-02-11 14:44:41
这种事情可能非常繁琐。 我建议您通过以下方式避免头痛：
<th>Client Name</th><th>Client ID</th>
如果您真的必须实现这种结构，请使用colspan and rowspan 。
在wordpress中将表的宽度与td匹配
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.