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

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  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.
-->
<!-- v10 Data Table -->
  <!-- End Toolbar Content -->

  <!-- Table -->
  <table class="bx--data-table  bx--data-table--zebra  " >
    <thead>
      <tr>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Name</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Protocol</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Port</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Rule</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Attached Groups</span>
                                        </th>
          <th >
            <!-- checkbox th -->
            <!-- sortable th  -->
                  <span class="bx--table-header-label">Status</span>
                                        </th>
      </tr>
    </thead>
  <tbody>
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 1
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups Testing a really long text here
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
      <tr >
          <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Load Balancer 5
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  HTTP
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  80
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Round Robin
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Maureen’s VM Groups
              </td>
                      <!-- expand icon td -->
              <td >
                <!-- truncated new markup -->
                  Active
              </td>
                  </tr>
      <!-- Expandable child row -->
    </tbody>
  </table>

  <!-- Pagination -->
</div>