carbon-components/html/data-table/data-table--simple.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 bx--responsive-table--static-size" data-table>
    <thead class="bx--table-head">
      <tr class="bx--table-row">
          <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>
      </tr>
    </thead>
    <tbody class="bx--table-body">
        <tr tabindex="0" class="bx--table-row bx--parent-row" data-parent-row>
                <td>Harry</td>
                              <td>Potter</td>
                              <td>Gryffindor</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <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>Hermoine</td>
                              <td>Granger</td>
                              <td>Gryffindor</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <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>Ron</td>
                              <td>Weasley</td>
                              <td>Gryffindor</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <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>Draco</td>
                              <td>Malfoy</td>
                              <td>Slytherin</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <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>Blaise</td>
                              <td>Zabini</td>
                              <td>Slytherin</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <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>Cedric</td>
                              <td>Diggory</td>
                              <td>Hufflepuff</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <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>Luna</td>
                              <td>Lovegood</td>
                              <td>Ravenclaw</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <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>Cho</td>
                              <td>Chang</td>
                              <td>Ravenclaw</td>
                      </tr>
          <tr class="bx--table-row bx--expandable-row bx--expandable-row--hidden">
            <td colspan="3">
              
      <p>Cho Chang is in Gryffindor House. She is in her fifth year.</p>
    
            </td>
          </tr>
    </tbody>
  </table>
</div>