Question

我想按照父表标题扩展内部表单元格的宽度我试过了，但是如何根据父标题单元格给内部表单元格宽度。

我尝试过的引导程序

<div class="table-responsive">
  <table class="table table-sm table-bordered block-table">
    <thead>
      <th>Sr.</th>
      <th>Product</th>
      <th>Unit</th>
      <th style="width: 15%">Serial Number</th>
      <th>Date</th>
      <th>Mac. Address</th>
      <th>Batch No.</th>
      <th>Qty</th>
      <th>Std Pkg</th>
      <th>Start Range</th>
      <!-- <th>Assigned Quantity</th> -->
    </thead>
    <tbody>
      <ng-container *ngFor="let inventory of inventoryList;let i=index">
        <tr style="cursor: pointer;" (click)="toggleProductEntryTable(i)">
          <td>{{i + 1}} </td>
          <td> {{inventory?.displayString}} </td>
          <td>{{inventory?.uomString}} </td>
          <td colspan="7" style="padding: 0px">
            <tbody>
              <tr style="display: table-header-group" *ngFor="let productEntry of inventory.inventories;let proEnt=index">
                <td style="display: table-cell;min-width: 160px"> {{productEntry?.subDetail?.serialNo}} </td>
                <td style="display: table-cell;"> {{productEntry?.inventory?.date}} </td>
                <td style="display: table-cell;"> {{productEntry?.subDetail?.macAddress}} </td>
                <td style="display: table-cell;"> {{productEntry?.subDetail?.batchNo}} </td>
                <td style="display: table-cell;"> {{productEntry?.checkoutDetail?.consumed - productEntry?.checkoutDetail?.assignedCount}} </td>
                <td style="display: table-cell;"> {{productEntry?.subDetail?.standardPackingQuntity}}</td>
                <td style="display: table-cell;"> {{productEntry?.checkoutDetail?.startRange}} </td>
                <td style="display: table-cell;"> {{productEntry?.checkoutDetail?.endRange}} </td>
              </tr>
            </tbody>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

.block-table {
  display: table;
  overflow-x: scroll;
  max-height: 448px;
  margin-bottom: 0px;
}

Answer 1

添加colspan =“ 2”以及您希望其跨越的列数（在您的情况下看起来为10）

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th>Monthly Savings</th>
    </tr>
    <tr>
      <td colspan="2">January</td>
    </tr>
    <tr>
      <td colspan="2">February</td>
    </tr>
  </table>

</body>

</html>

tr单元格宽度按父表标题宽度

1 个答案: