I'll-Be-Back I'll-Be-Back -4 years ago 97
HTML Question

Multiple rows in td

Stores

<td>
contain table with mulitple rows. A store can have mulitple
stores (rows).

See Example: https://jsfiddle.net/ak3wtkak/1/

The width of Stores and Quantity (
<th>
) columns should be same for mulitple rows on the second table. How to fix this or what is alternative approach?

enter image description here

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

You have to use rowspan. Make the first 2 rows with rowspan of 3.

<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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download