主页 / 问题 / 1360750
Accepted
Сергей
Asked:2022-05-14 07:09:10 +0000 UTC2022-05-14 07:09:10 +0000 UTC

将新表添加到现有表的一行

  • 772

有2html张桌子。第一个是对象列表，第二个是有关个人的详细信息。两者的列数不同。第一个在页面加载时立即显示，第二个可以动态加载，由用户选择。我正在尝试tr在第一个表中创建一个新表，如屏幕截图所示：

在此处输入图像描述

并插入到tr第二个表中table。

让第二个表是：

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

添加第二个表是通过JS但也可以手动完成，如屏幕截图所示：

在此处输入图像描述

结果是一个结构，其中空的tr第一个表（我想在其中插入table）保持为空，并且tr第二个表的行被简单地添加到第一个表中。屏幕：

在此处输入图像描述

这不是问题，但表格的列数不同，因此，屏幕上以黄色突出显示的行将仅占第一个表格的 3 列，其余空间将保持空白，像这样的东西：

在此处输入图像描述

如果tr尝试table插入<tr><td></td></tr>. 只有这样，第二个表才会占用列空间bla-1。即使第二个表格的列数不同，如何使第二个表格的宽度与第一个表格的宽度相同？

html

2 个回答

  1. 如果这是 ASP.NET Core，那么你可能需要先创建一个局部视图以表格形式显示数据，这也需要一个模型或视图模型。然后，在加载并显示第一个表的所有行之后，通过单击该行，您可以将此局部视图的显示添加到页面中。并且为了让行在宽度上匹配，看看类的宽度在bootstrap中是如何设置的，你需要第二个表的类与第一个相同，即

    <table class="table table-striped points-table">

    这样第二个表也将扩展到所有 12 个引导程序块。为了美观，在第一个表中，您可以添加 table-hover 类，以便在悬停时突出显示该行。所以第二张桌子可能是这样的

    <table class="table table-striped points-table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

    在此存储库中，适用于 .NET 5 的 ASP.NET Core MVC 上的应用程序的工作代码，它使用带有Bootstrap 5的表装饰。在第二个存储库中，实现了高级 ASP.NET Core 概念，以及使用Font Awesome美化表格。

    • 1
  2. Best Answer

    您<tr>不能将表格插入，只能插入<td>and <th>。如果您需要为整行创建一个表格<tr>，那么您可以创建一个<td>具有属性的单元格，您可以colspan="xx"在其中指定一行中的单元格数（如示例的最底部所做的那样）。

    table,
td {
  border: 1px solid #00f;
}
    <table>
  <tr>
    <th>
      <table>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
        </tr>
        <tr>
          <th>a</th>
          <td>1a</td>
          <td>2a</td>
        </tr>
        <tr>
          <th>b</th>
          <td>1b</td>
          <td>2b</td>
        </tr>
      </table>
    </th>
    <th>HEADER</th>
  </tr>
  <tr>
    <td>
      Some cell
    </td>
    <td>
      <table>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
        </tr>
        <tr>
          <th>a</th>
          <td>1a</td>
          <td>2a</td>
        </tr>
        <tr>
          <th>b</th>
          <td>1b</td>
          <td>2b</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
          <th>6</th>
        </tr>
        <tr>
          <th>a</th>
          <td>1a</td>
          <td>2a</td>
          <td>3a</td>
          <td>4a</td>
          <td>5a</td>
          <td>6a</td>
        </tr>
        <tr>
          <th>b</th>
          <td>1b</td>
          <td>2b</td>
          <td>3b</td>
          <td>4b</td>
          <td>5b</td>
          <td>6b</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

    colspan 和 rowspan 的另一个例子：

    table,
td {
  border: 1px solid #00f;
}

td {
  width: 5rem;
  height: 5rem;
  text-align: center;
  font-size: 2.5rem;
}

td[colspan="2"] {
  width: 10rem;
}

td[rowspan="2"] {
  height: 10rem;
}
    <table>
  <tr>
    <td rowspan="2"> 1 </td>
    <td colspan="2"> 2 </td>
  </tr>
  <tr>
    <td> 3 </td>
    <td rowspan="2"> 4 </td>
  </tr>
  <tr>
    <td colspan="2"> 5 </td>
  </tr>
</table>

    • 1

相关问题