html - td 中的多行

Question

专卖店 <td>包含具有多行的表。一个商店可以有多个
存储(行)。

参见示例:https://jsfiddle.net/ak3wtkak/1/

Stores 和 Quantity ( <th> ) 列的宽度对于第二个表上的多行应该相同。如何解决这个问题或什么是替代方法？

<table border="1" width="100%">
  <thead>
    <tr>
      <th style="width:300px">Product</th>
      <th>Barcode</th>
      <th>Stores</th>
      <th class="middle">Quantity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
      Item 1
      </td>
      <td>12345</td>
      <td colspan="3">
        <table border="1" width="100%">
          <tbody>
            <tr>
              <td>Store Name 1</td>
              <td class="middle">4</td>
            </tr>
            <tr>
              <td>Store Name 2</td>
              <td class="middle">4</td>
            </tr>
            <tr>
              <td>Store Name 3</td>
              <td class="middle">4</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您必须使用 rowspan。
使用 rowspan 为 3 制作前 2 行。

<table border="1" width="100%">
  <thead>
    <tr>
      <th style="width:300px">Product</th>
      <th>Barcode</th>
      <th>Stores</th>
      <th class="middle">Quantity</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td rowspan="3">Item 1</td>
      <td rowspan="3">12345</td>
      <td>Store Name 1</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Store Name 2</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Store Name 3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>