html - tr 单元格宽度根据父表头宽度

标签 html css bootstrap-4

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

enter image description here

我用 boottrap 尝试了什么

<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;
}

最佳答案

将 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>

关于html - tr 单元格宽度根据父表头宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51650378/

相关文章:

javascript - Blogger 代码数据 :post. url 用作带有图像按钮的可点击链接

html - 用右边的图像环绕文字

javascript - 修复 Firefox 文件选择窗口在所有其他窗口后面打开的问题

css - Bootstrap 4 对齐左列中的文本,如表格

javascript - React 和 Bootstrap Javascript

jquery - 当我使用 jquery 单击整行时,如何访问 td 中的 div?

html - 嵌套表不占用父 td 的 100% 高度

javascript - 带动画 CSS 的图像 + 提交按钮悬停

javascript - 浏览器向下滚动后更改 href url

html - 无法启动使用 Bootstrap 关闭的 collpased div