Table


Table Version Three

Assigment Status Grade
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. --
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class='bp-tb version-third'>
  <table>
    <thead>
      <tr class="overline--two">
        <th>Assigment</th>
        <th>Status</th>
        <th>Grade</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 gray-lighter-background-color gray-darker-color">
          <span class="chip__value display--inline-block">Default</span>
          </button>
        </td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 primary-light-background-color primary-dark-color">
          <span class="chip__value display--inline-block">XXXXX.XX</span>
          </button>
        </td>
        <td><span class="blueprint-icon icon-more_vert"></span></td>
      </tr>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 gray-fit-darker-background-color text-light">
          <span class="chip__value display--inline-block">Disabled</span>
          </button>
        </td>
        <td>
          --
        </td>
        <td><span class="blueprint-icon icon-more_vert"></span></td>
      </tr>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 gray-lighter-background-color gray-darker-color">
          <span class="chip__value display--inline-block">Default</span>
          </button>
        </td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 bg-red--opacity red-color">
          <span class="chip__value display--inline-block">Alert</span>
          </button>
        </td>
        <td><span class="blueprint-icon icon-more_vert"></span></td>
      </tr>
      <tr>
      <tr>
        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 bg-red--opacity red-color">
          <span class="chip__value display--inline-block">Alert</span>
          </button>
        </td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 primary-light-background-color primary-dark-color">
          <span class="chip__value display--inline-block">XXXXX.XX</span>
          </button>
        </td>
        <td><span class="blueprint-icon icon-more_vert"></span></td>
      </tr>
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
      <td>
        <button class="chip display--inline-block position--relative p-a-0 gray-lighter-background-color gray-darker-color">
        <span class="chip__value display--block">Default</span>
        </button>
        <span class="m-t-5 display--block">Lorem Ipsum is simply dummy text</span>
        <a href="#" class="gray-darker-color text--underline m-t-5 display--block">Lorem Ipsum is simply dummy text</a>
      </td>
      <td>
        <button class="chip display--inline-block position--relative p-a-0 primary-light-background-color primary-dark-color">
        <span class="chip__value display--inline-block">XXXXX.XX</span>
        </button>
      </td>
      <td><span class="blueprint-icon icon-more_vert"></span></td>
      </tr>
      <tr>
        <td>
          <div class="display--inline-flex">
            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none" class="m-r-10">
              <path
                d="M20.0004 5.03758V9.88264C20.0004 11.0892 19.6014 12.1057 18.8889 12.8087C18.1859 13.5212 17.1693 13.9202 15.9628 13.9202V15.6397C15.9628 16.2858 15.2408 16.6753 14.7088 16.3143L13.7873 15.7063C13.8728 15.4118 13.9108 15.0887 13.9108 14.7467V10.8802C13.9108 8.94217 12.6188 7.65012 10.6807 7.65012H4.2301C4.0971 7.65012 3.9736 7.65964 3.8501 7.66914V5.03758C3.8501 2.61503 5.46513 1 7.88767 1H15.9628C18.3854 1 20.0004 2.61503 20.0004 5.03758Z"
                stroke="#444444" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path
                d="M13.9107 10.88V14.7465C13.9107 15.0885 13.8727 15.4115 13.7872 15.706C13.4357 17.1026 12.2767 17.9766 10.6807 17.9766H8.09663L5.22758 19.8861C4.80007 20.1806 4.23005 19.8671 4.23005 19.3541V17.9766C3.26104 17.9766 2.45353 17.6536 1.89302 17.0931C1.32301 16.5231 1 15.7155 1 14.7465V10.88C1 9.07495 2.12102 7.83042 3.85005 7.66892C3.97356 7.65942 4.09705 7.6499 4.23005 7.6499H10.6807C12.6187 7.6499 13.9107 8.94195 13.9107 10.88Z"
                stroke="#444444" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
          </div>
        </td>
        <td>
          <button class="chip display--inline-block position--relative p-a-0 gray-lighter-background-color gray-darker-color">
          <span class="chip__value display--inline-block">Default</span>
          </button>
        </td>
        <td>
          <button
            class="chip display--inline-block position--relative p-a-0 primary-light-background-color primary-dark-color">
          <span class="chip__value display--inline-block">Completed</span>
          </button>
        </td>
        <td><span class="blueprint-icon icon-more_vert"></span></td>
      </tr>
    </tbody>
  </table>
</div>