Create nested table rows

Question

I need to create a complex table that has multiple nested rows.

My current understanding is that you can not have nested rows in an HTML table. For example,

<table>
  <tr>
    <td>header one</td>
    <td>header two</td>
  </tr>

  <tr>
    <td>One</td>
    <td>
      <!-- nested row -->
      <tr>
        <td>nested one</td>
        <td>nested two</td>
      </tr>
    </td>
  </tr>
</table>

Would expect to create:

This is a very simple exaple. The table that I need to generate has several more nested rows.

I know that there is the table attribute rowspan to set rows. However, I'm wondering if there are any open-source JavaScript libraries or alternative methods for creating nested table rows, without having to use the rowspan attribute.

Adam Jenkins · Accepted Answer · 2017-02-08 16:58:00Z

30

You need to wrap the nested tr in a new table element first. So it looks like:

table { width: 100%; border-collapse: collapse;}
td { border: 1px solid #000; }
td table { 
  margin: -2px;
  width: calc(100% + 4px);
}

<table>
      <tr>
        <td>header one</td>
        <td>header two</td>
      </tr>
    
      <tr>
        <td>One</td>
        <td>
    
          <!-- nested row -->
          <table>
           <tr>
             <td>nested one</td>
           </tr>
           <tr>
             <td>nested two</td>
           </tr>
          </table>
    
        </td>
      </tr>
    </table>

tr can only be a child of a table, thead, tfoot, etc.

rowspan is much easier to style, though:

table { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

    <table>
      <tr>
        <td>header one</td>
        <td>header two</td>
      </tr>
    
      <tr>
        <td rowspan="2">One</td>
        <td>nested one</td>
      </tr>
      <tr>
        <td>nested two</td>
      </tr>
    </table>

edited Feb 8, 2017 at 16:58

answered Feb 8, 2017 at 16:49

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8202629 Over a year ago

<td rowspan="2">One</td>

parasrish Over a year ago

rowspan and colspan. thx.

ADyson · Accepted Answer · 2017-02-08 16:49:58Z

4

You'd have to create a nested table:

<td>
  <!-- nested row -->
  <table>
    <tr>
      <td>nested one</td>
      <td>nested two</td>
    </tr>
  </table>
</td>

answered Feb 8, 2017 at 16:49

ADyson

62.9k16 gold badges88 silver badges100 bronze badges

Collectives™ on Stack Overflow

Create nested table rows

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related