tdの複数の行

Question

ストア<td>複数の行を含むテーブルが含まれています。店舗には複数の店舗（行）があります。

参照例：https://jsfiddle.net/ak3wtkak/1/

ストアと数量（<th>）列の幅は、第二のテーブルにmulitple行について同じであるべきです。これを解決するにはどうすればよいのでしょうか？あなたがROWSPANを使用する必要が

<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

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