时间戳

首页 > 解决方案 > 在 a 中嵌套表以匹配外部表

html - 在 a 中嵌套表以匹配外部表

问题描述

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，第二个用于内部表的一行。

标签： htmlcssangular

解决方案

你应该嵌套桌子吗？我会改用 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>

推荐阅读