carbon-components/html/data-table/data-table.html

Carbon Components is a component library for IBM Cloud

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--responsive-table-container" data-responsive-table>
  <table class="bx--responsive-table" data-table>
    <thead class="bx--table-head">
      <tr class="bx--table-row">
          <th class="bx--table-header">
          </th>
          <th class="bx--table-header bx--table-select">
              <input data-event="select-all" id="bx--checkbox-1" class="bx--checkbox" type="checkbox" value="green" name="checkbox-1">
              <label for="bx--checkbox-1" class="bx--checkbox-label" aria-label="Label name">
                <span class="bx--checkbox-appearance">
                  <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                    <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                  </svg>
                </span>
              </label>
          </th>
          <th class="bx--table-header bx--table-sort" data-event="sort">
                <span>First Name</span>
                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
                  <path d="M10 0L5 5 0 0z"></path>
                </svg>
          </th>
          <th class="bx--table-header bx--table-sort" data-event="sort">
                <span>Last Name</span>
                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
                  <path d="M10 0L5 5 0 0z"></path>
                </svg>
          </th>
          <th class="bx--table-header bx--table-sort" data-event="sort">
                <span>House</span>
                <svg class="bx--table-sort__svg" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
                  <path d="M10 0L5 5 0 0z"></path>
                </svg>
          </th>
          <th class="bx--table-header">
          </th>
      </tr>
    </thead>
    <tbody class="bx--table-body">
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-2">
                  <label for="bx--checkbox-2" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Harry</td>
                              <td>Potter</td>
                              <td>Gryffindor</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <h4><strong>Harry Potter</strong></h4>
      <p>Harry James Potter (b. 31 July, 1980) was a half-blood wizard, the only child and son of the late James and Lily
        Potter (née Evans), and one of the most famous and powerful wizards of modern times. In what proved to be a vain
        attempt to circumvent a prophecy that stated that a boy born at the end of July of 1980 could be able to defeat
        him, Lord Voldemort tried to murder him when he was a year and three months old. Voldemort murdered Harry's parents
        as they tried to protect him, shortly before attacking Harry.</p>
    
            </td>
          </tr>
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-3">
                  <label for="bx--checkbox-3" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Hermoine</td>
                              <td>Granger</td>
                              <td>Gryffindor</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <table class="bx--responsive-table bx--responsive-table--static-size">
        <thead>
          <tr class="bx--table-row">
            <th class="bx--table-header">First Name</th>
            <th class="bx--table-header">Last Name</th>
            <th class="bx--table-header">House</th>
            <th class="bx--table-header">Hello</th>
            <th class="bx--table-header">Column</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Godric</td>
            <td>Gryffindor</td>
            <td>Origin</td>
            <td>Something</td>
            <td>Hooray</td>
          </tr>
          <tr>
            <td>Salazar</td>
            <td>Slytherin</td>
            <td>Origin</td>
            <td>Something</td>
            <td>Hooray</td>
          </tr>
        </tbody>
      </table>
    
            </td>
          </tr>
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-4">
                  <label for="bx--checkbox-4" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Ron</td>
                              <td>Weasley</td>
                              <td>Gryffindor</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <img src="https://upload.wikimedia.org/wikipedia/en/5/5e/Ron_Weasley_poster.jpg" />
    
            </td>
          </tr>
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-5">
                  <label for="bx--checkbox-5" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Draco</td>
                              <td>Malfoy</td>
                              <td>Slytherin</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <p>Draco Malfoy is in Gryffindor House. He is in his fifth year.</p>
    
            </td>
          </tr>
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-6">
                  <label for="bx--checkbox-6" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Blaise</td>
                              <td>Zabini</td>
                              <td>Slytherin</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <p>Blaise Zabini is in Gryffindor House. He is in his fifth year.</p>
    
            </td>
          </tr>
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-7">
                  <label for="bx--checkbox-7" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Cedric</td>
                              <td>Diggory</td>
                              <td>Hufflepuff</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <p>Cedric Diggory is in Hufflepuff House. He is in his fifth year.</p>
    
            </td>
          </tr>
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-8">
                  <label for="bx--checkbox-8" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Luna</td>
                              <td>Lovegood</td>
                              <td>Ravenclaw</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <p>Luna Lovegood is in Ravenclaw House. She is in her fifth year.</p>
    
            </td>
          </tr>
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td tabindex="0" class="bx--table-expand" data-event="expand">
                  <svg class="bx--table-expand__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
                    <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
                  </svg>
                </td>
                <td class="bx--table-select">
                  <input id="bx--checkbox-2" class="bx--checkbox" type="checkbox" value="green" name="checkbox-9">
                  <label for="bx--checkbox-9" class="bx--checkbox-label" aria-label="Label name">
                    <span class="bx--checkbox-appearance">
                      <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
                        <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
                      </svg>
                    </span>
                  </label>
                </td>
                <td>Cho</td>
                              <td>Chang</td>
                              <td>Ravenclaw</td>
                              <td class="bx--table-overflow">
                  <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
                    <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
                      <circle cx="2" cy="2" r="2"></circle>
                      <circle cx="2" cy="10" r="2"></circle>
                      <circle cx="2" cy="18" r="2"></circle>
                    </svg>
                    <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn" data-floating-menu-primary-focus>Stop app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Restart app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Rename app</button>
                        </li>
                        <li class="bx--overflow-menu-options__option">
                          <button class="bx--overflow-menu-options__btn">Edit routes and access</button>
                        </li>
                        <li class="bx--overflow-menu-options__option bx--overflow-menu-options__option--danger">
                          <button class="bx--overflow-menu-options__btn">Delete app</button>
                        </li>
                    </ul>
                  </div>
                </td>
        </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="6">
              
      <p>Cho Chang is in Gryffindor House. She is in her fifth year.</p>
    
            </td>
          </tr>
    </tbody>
  </table>
</div>