Documentação
Ultima atualização: 11 de Fevereiro de 2019

Tabela

Você deverá adotar a estrutura abaixo para inserir novas tabelas, se precisar, remova os itens que não serão necessários, como a paginação e o botão de submit.

Chamados

ID
Assunto
Departamento
Útima Atualização
Status
HostDime Brasil::VoIP Request - Phone call Issies
Development
37104h 36m 47s
In Progress
Graphing issue - No new data in graph
Network Administrators
37104h 36m 47s
Pending Customer
Site5 Vlan Migration - brazil DC2...
Network Administrators
37104h 36m 47s
Open
Site5 Vlan Migration - brazil DC2...
Network Administrators
37104h 36m 47s
Solved
<div class="table-content">
  <h3 class="table-title">Chamados</h3>
  <form class="table-container" action="">
    <div class="table-out">
      <div class="table">
        <div class="thead">
          <div class="th">ID</div>
          <div class="th">Assunto</div>
          <div class="th">Departamento</div>
          <div class="th">Útima Atualização</div>
          <div class="th">Status</div>
        </div>
        <div class="tbody">

          <div class="tr">
            <div class="table-hover" data-href="https://www.hostdime.com.br/">
              <div class="td td-id">
                <div class="custom-checkbox">
                  <label>
                    660963
                    <input type="checkbox" name="id[]" value="660963">
                    <span class="checkbox"></span>
                  </label>
                </div>
              </div>
              <div class="td">HostDime Brasil::VoIP Request - Phone call Issies</div>
              <div class="td">Development</div>
              <div class="td">37104h 36m 47s</div>
            </div>
            <div class="td">
              <div class="status in-progress">
                <i class="icon-svg ic-earphone"></i>
                <span> In Progress</span>
              </div>
            </div>
          </div>

          <div class="tr">
            <div class="table-hover" data-href="https://www.hostdime.com.br/">
              <div class="td td-id">
                <div class="custom-checkbox">
                  <label>
                     658446
                    <input type="checkbox" name="id[]" value="658446">
                    <span class="checkbox"></span>
                  </label>
                </div>
              </div>
              <div class="td">Graphing issue - No new data in graph</div>
              <div class="td">Network Administrators</div>
              <div class="td">37104h 36m 47s</div>
            </div>
            <div class="td">
              <div class="status pending">
                <i class="icon-svg ic-pending"></i>
                <span> Pending Customer</span>
              </div>
            </div>
          </div>

          <div class="tr">
            <div class="table-hover" data-href="https://www.hostdime.com.br/">
              <div class="td td-id">
                <div class="custom-checkbox">
                  <label>
                     658419
                    <input type="checkbox" name="id[]" value="658419">
                    <span class="checkbox"></span>
                  </label>
                </div>
              </div>
              <div class="td">Site5 Vlan Migration - brazil DC2...</div>
              <div class="td">Network Administrators</div>
              <div class="td">37104h 36m 47s</div>
            </div>
            <div class="td">
              <div class="status open">
                <i class="icon-svg bubble-simple-line-icons"></i>
                <span>Open</span>
              </div>
            </div>
          </div>

          <div class="tr">
            <div class="table-hover" data-href="https://www.hostdime.com.br/">
              <div class="td td-id">
                <div class="custom-checkbox">
                  <label>
                     658485
                    <input type="checkbox" name="id[]" value="658485">
                    <span class="checkbox"></span>
                  </label>
                </div>
              </div>
              <div class="td">Site5 Vlan Migration - brazil DC2...</div>
              <div class="td">Network Administrators</div>
              <div class="td">37104h 36m 47s</div>
            </div>
            <div class="td">
              <div class="status solved">
                <i class="icon-svg ic-solved"></i>
                <span>Solved</span>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    <div class="table-pagination">
      <!--Botão Submit-->
      <div class="btn-close">
        <button type="submit" class="btn btn-submit" title="Fechar Chamados Selecionados">Fechar Chamados Selecionados</button>
      </div>
      <!--Paginação-->
      <ul class="tpagination">
        <li class="fist"><a href="#" title="Back">Back</a></li>
        <li class="page current"><a href="#" title="Page 01">01</a></li>
        <li class="page"><a href="#" title="Page 02">02</a></li> 
        <li class="page"><a href="#" title="Page 03">03</a></li>
        <li class="extend"><span>...</span></li>
        <li class="page"><a href="#" title="Page 12">12</a></li>
        <li class="last"><a href="#" title="Next">Next</a></li>
      </ul> 
    </div>   
  </form>
</div>

Tabela apeas apra exibição de dados

Como você pode perceber no exemplo abaixo, o link em cada linha é opciona, basta remover o atributo data-href da class .table-hover

Chamados

ID
Produto
ID do Chamado
Valor
Vencimento
2447176
Cloud Account
177.234.150.131
R$ 345,89
30/10/2018
2447175
VPS - vps.test
177.234.150.131
R$ 289,89
12/10/2018
<div class="table-content">
  <h3 class="table-title">Chamados</h3>
  <div class="table-container">
    <div class="table-out">
      <div class="table">
        <div class="thead">
          <div class="th">ID</div>
          <div class="th">Produto</div>
          <div class="th">ID do Chamado</div>
          <div class="th">Valor</div>
          <div class="th">Vencimento</div>
        </div>
        <div class="tbody">

          <div class="tr">
            <div class="table-hover">
              <div class="td">2447176</div>
              <div class="td">Cloud Account</div>
              <div class="td">177.234.150.131</div>
              <div class="td">R$ 345,89</div>
              <div class="td">30/10/2018</div>
            </div>
          </div>

          <div class="tr">
            <div class="table-hover" data-href="https://www.hostdime.com.br/">
              <div class="td">2447175</div>
              <div class="td">VPS - vps.test</div>
              <div class="td">177.234.150.131</div>
              <div class="td">R$ 289,89</div>
              <div class="td">12/10/2018</div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
    <div class="table-pagination">
      <!--Paginação-->
      <div class="btn-close">
      </div> 
      <ul class="tpagination">
        <li class="fist"><a href="#" title="Back">Back</a></li>
        <li class="page current"><a href="#" title="Page 01">01</a></li>
        <li class="page"><a href="#" title="Page 02">02</a></li> 
        <li class="page"><a href="#" title="Page 03">03</a></li>
        <li class="extend"><span>...</span></li>
        <li class="page"><a href="#" title="Page 12">12</a></li>
        <li class="last"><a href="#" title="Next">Next</a></li>
      </ul> 
    </div>   
  </div>
</div>