Fix a table header inside a form

Question

Fix a table header inside a form

Asked 5 years, 2 months ago

Viewed 80 times

1

I have the following code, where the table is inside a form and I intend to pin the headline but it’s not working:

<div class="wrapper">
  <div class="sidebar">
    <ul class="nav1">
      <li><a type="button" class="button button1" data-toggle="modal" data-target="#add_data_Modal">Requisição Luvas</a></li>
      <li><a type="button" class="button button2" data-toggle="modal" data-target="#add_data_Modal1">Requisição Produtos</a></li>
      <li><a type="button" class="button button3" data-toggle="modal" data-target="#add_data_Modal2">Requisição Manutenção</a></li>
      <li><a type="button" class="button button4" data-toggle="modal" data-target="#add_data_Modal3">Alimentação ERPI</a></li>
      <li><a type="button" class="button button5" data-toggle="modal" data-target="#add_data_Modal4">Alimentação Reforço</a></li>
      <li><a type="button" class="button button6" data-toggle="modal" data-target="#add_data_Modal5">Sobremesa/Queijo</a></li>
      <li><a type="button" class="button button7" data-toggle="modal" data-target="#add_data_Modal6">Resguardos</a></li>
      <li><a type="button" class="button button8" data-toggle="modal" data-target="#add_data_Modal7">Carros de Higiene</a></li>
      <li><a type="button" class="button button9" data-toggle="modal" data-target="#add_data_Modal8">Oratório</a></li>
    </ul>
  </div>
  <div class="content isOpen">

    <h1>Registos</h1>
  <div class="modal fade right" id="add_data_Modal7" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close close8" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Organização de Carros de Higiene</h4>
</div>    
<div class="modal-body"> 
<div class="container">
  <form class="form8" name="form8" id="form8" method="POST">
    <ul class="flex-outer">
      <li>
        <label for="Carro">Carros</label>
        <select class="form-control" id="Carro" name="Carro" required="">
            <option></option>
            <?php        
            $sql = "SELECT * FROM raddb.CarrosAla ORDER BY Descricao1 ASC";
            $qr = mysqli_query($conn, $sql);
            while($ln = mysqli_fetch_assoc($qr)){
            echo '<option value="'.$ln['Id'].'">'.$ln['Descricao1'].'</option>';
            }
            ?>      
        </select>
      </li>
      <li>
        <?php 
        date_default_timezone_set('Europe/Lisbon');
        $result_cursos = "SELECT * FROM raddb.ListagemPrduto WHERE Ativo = 1 
        ORDER BY Descricao ASC";
        $resultado_cursos = mysqli_query($conn, $result_cursos);
        ?>
     <table id="spoiler" class="table table-condensed">
     <thead> 
     <tr>
     <th style="display: none" rowspan=2>Id</th> 
     <th style="font-size: 12px" rowspan=2>Produtos</th>
     <th style="font-size: 12px" colspan=2>No Carro</th> 
     <th style="font-size: 12px" colspan=2>Na Prateleira</th> 
     <th style="font-size: 12px" colspan=2>Data na Emb.</th>
     <th style="font-size: 12px" rowspan=2>Observação</th>
     </tr>
     <tr> 
     <th style="font-size: 12px">Tem</th>
     <th style="font-size: 12px">Não Tem</th> 
     <th style="font-size: 12px">Tem</th> 
     <th style="font-size: 12px">Não Tem</th>
     <th style="font-size: 12px">Tem</th>
     <th style="font-size: 12px">Não Tem</th> 
     </tr> 
     </thead> 
     <tbody>
     <?php
     $y = 0;
     while($produto = mysqli_fetch_array($resultado_cursos)) {

     $property = ($produto["Descricao"]==="1 Desinfetante de Surpeficies" || $produto["Descricao"]==="Saco/Caixa c/ Cotonetes" || $produto["Descricao"]==="1 Rolo Sacos Lixo Azuis" || $produto["Descricao"]==="1 Rolo Sacos Lixo Preto" || $produto["Descricao"]==="1 Rolo Sacos Lixo Verdes" || $produto["Descricao"]==="Esponjas de Banho" || $produto["Descricao"]==="Esponjas c/ Gel" || $produto["Descricao"]==="Laminas Barbear" || $produto["Descricao"]==="1 Secador c/ Ponta" || $produto["Descricao"]==="3 Aventais" || $produto["Descricao"]==="1 Pinça" || $produto["Descricao"]==="1 Alicate" || $produto["Descricao"]==="Resguardos" || $produto["Descricao"]==="Bocais" || $produto["Descricao"]==="Caneta de Acetato" || $produto["Descricao"]==="Carro Higienizado")? "disabled" : "required";

     $tabela1 .= '<tr>'; 
     $tabela1 .= '<td style="display: none"><input type="text" name="IdProduto['.$y.']" value="'.$produto["Id"].'"></td>'; 
     $tabela1 .= '<td style="font-size: 12px">'.$produto["Descricao"].'</td> '; 
     $tabela1 .= '<td><ul class="flex-outer">'; 
     $tabela1 .= '<div class="form-check">'; 
     $tabela1 .= '<label class="toggle1">'; 
     $tabela1 .= '<input style="font-size: 12px" type="radio" name="Sim['.$y.']" class="r" value="Ok" required><span class="label-text"></span>'; 
     $tabela1 .= '</label>'; 
     $tabela1 .= '</div></td>'; 
     $tabela1 .= '<td><div class="form-check">'; 
     $tabela1 .= '<label class="toggle1">'; 
     $tabela1 .= '<input style="font-size: 12px" type="radio" name="Sim['.$y.']" class="r" value="Não Ok" required> <span class="label-text"></span>'; 
     $tabela1 .= '</label>'; 
     $tabela1 .= '</div></td>'; 
     $tabela1 .= '<td class="obs"><div class="form-check">'; 
     $tabela1 .= '<label class="toggle1">'; 
     $tabela1 .= '<input style="font-size: 12px" type="radio" name="Stock['.$y.']" class="p" value="Ok"> <span class="label-text"></span>'; 
     $tabela1 .= '</label>'; 
     $tabela1 .= '</div></td>'; 
     $tabela1 .= '<td class="obs"><div class="form-check">'; 
     $tabela1 .= '<label class="toggle1">'; 
     $tabela1 .= '<input style="font-size: 12px" type="radio" name="Stock['.$y.']" class="p" value="Não Ok"> <span class="label-text"></span>'; 
     $tabela1 .= '</label>'; 
     $tabela1 .= '</div></td>'; 
     $tabela1 .= '<td><div class="form-check">'; 
     $tabela1 .= '<label class="toggle1">'; 
     $tabela1 .= '<input style="font-size: 12px" type="radio" name="DataP['.$y.']" value="Ok" '.$property.'> <span class="label-text"></span>'; 
     $tabela1 .= '</label>'; 
     $tabela1 .= '</div></td>'; 
     $tabela1 .= '<td><div class="form-check">'; 
     $tabela1 .= '<label class="toggle1">'; 
     $tabela1 .= '<input style="font-size: 12px" type="radio" name="DataP['.$y.']" value="Não Ok" '.$property.'> <span class="label-text"></span>'; 
     $tabela1 .= '</label>'; 
     $tabela1 .= '</div></td>'; 
     $tabela1 .= '</ul>'; 
     $tabela1 .= '<td><textarea style="font-size: 12px" type="text" class="Observacao" name="Observacao3['.$y.']" rows="2"></textarea></td>'; 
     $tabela1 .= '</tr>'; 
     $y++;} 
     $tabela1 .= '</tbody>'; 
     $tabela1 .= '</table>'; 
     $tabela1 .= '</li>'; 
     echo $tabela1;
     ?>
     <li style="float: right">
      <button type="button" class="btn btn-danger btn8" data-dismiss="modal">Cancelar</button>
      <button class="btn btn-success">Gravar</button>
     </li>
    </ul>
    </form>
    </div>
    </div>  
    </div>
    </div>
    </div>

  </div>
</div>

Then in the js I’m using the datatables:

$(document).ready(function() {
    var table = $('#spoiler').DataTable( {
        dom: 'rtipip',
        "paging":   false,
        "ordering": false,
        "info":     false,

        fixedHeader: {
            header: true,
            footer: true
        }
    } );
} );

But the header does not fix.

I tried this way:

thead, tbody{
  display: block;  
}

tbody{
  overflow-y: scroll;
  height: 100px;
  }

body {
  font-size: 12px;
  font-family: arial;
}

.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.table {
  border-collapse: collapse;
  background-color: #fff;
  width: 100%;
}
.table caption {
  background-color: #222;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
}
.table th,
.table td {
  padding: 5px;
  width:20%;
}
.table thead {
  background-color: #333;
  color: #fff;
  height: 40px;
}

.table tbody tr {
  border-bottom: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-condensed">
<thead> 
<tr>
<th style="display: none" rowspan=2>Id</th> 
<th style="font-size: 12px" rowspan=2>Produtos</th>
<th style="font-size: 12px" colspan=2>No Carro</th> 
<th style="font-size: 12px" colspan=2>Na Prateleira</th> 
<th style="font-size: 12px" colspan=2>Data na Emb.</th>
<th style="font-size: 12px" rowspan=2>Observação</th>
</tr>
<tr> 
<th style="font-size: 12px">Tem</th>
<th style="font-size: 12px">Não Tem</th> 
<th style="font-size: 12px">Tem</th> 
<th style="font-size: 12px">Não Tem</th>
<th style="font-size: 12px">Tem</th>
<th style="font-size: 12px">Não Tem</th> 
</tr> 
</thead> 
<tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>

  </tbody>
</table>

But it doesn’t work because the second disappears <tr> header

With the suggestions placed as duplicate, I continue with the same problem, I show:

.tabela {
  height: 200px;
  overflow: scroll;
}
.tabela th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 0 0 #ddd, 0 -5px 0 0 #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 tabela">
<table class="table table-condensed">
<thead> 
<tr>
<th style="display: none" rowspan=2>Id</th> 
<th style="font-size: 12px" rowspan=2>Produtos</th>
<th style="font-size: 12px" colspan=2>No Carro</th> 
<th style="font-size: 12px" colspan=2>Na Prateleira</th> 
<th style="font-size: 12px" colspan=2>Data na Emb.</th>
<th style="font-size: 12px" rowspan=2>Observação</th>
</tr>
<tr> 
<th style="font-size: 12px">Tem</th>
<th style="font-size: 12px">Não Tem</th> 
<th style="font-size: 12px">Tem</th> 
<th style="font-size: 12px">Não Tem</th>
<th style="font-size: 12px">Tem</th>
<th style="font-size: 12px">Não Tem</th> 
</tr> 
</thead> 
<tbody>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>
    <tr>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
      <td class="text-right">10</td>
      <td class="text-center">-</td>
      <td class="text-right">10</td>
    </tr>

  </tbody>
</table>
</div>
</div>
</div>

These <th>:

<th style="font-size: 12px" colspan=2>No Carro</th> 
<th style="font-size: 12px" colspan=2>Na Prateleira</th> 
<th style="font-size: 12px" colspan=2>Data na Emb.</th>

do not fix and intended to also fix

1

Your question is similar to this one: https://answall.com/questions/134380/como-aplica-scrollbar-somente-no-elemento-tbody-em-uma-tabela-html

– Edward Ramos

2019/09/12 at 17:02
Here is an example: https://jsfiddle.net/w9Lxubf9/1/

– Edward Ramos

2019/09/12 at 17:04
@hugocsl can see the question update to see the problem it still has?

– Bruno

2019/09/13 at 12:08
I understand Bruno, abora became clearer your problem...

– hugocsl

2019/09/13 at 12:41

1 answer

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-09-13T12:48:01+00:00

Your problem basically is why you put top:0 in both th. But you shouldn’t do that, because that way the two of you th are glued to the top, when in reality the th The bottom row should have a top of the top row size top:20.

Here’s a model that can help you.

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #000;
}
th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 1px 0 0 #ddd, 0 -5px 0 0 #fff;
}
thead {
    height: 37px;
}
.teste th {
    top: 20px;
    padding-bottom: 0;
    padding-top: 0;
}
div {
    height: 200px;
    overflow: auto;
}

<div>
    <table class="table table-condensed">
        <thead>
            <tr>
                <th style="display: none" rowspan=2>Id</th>
                <th style="font-size: 12px; height: 36px" rowspan=2>Produtos</th>
                <th style="font-size: 12px" colspan=2>No Carro</th>
                <th style="font-size: 12px" colspan=2>Na Prateleira</th>
                <th style="font-size: 12px" colspan=2>Data na Emb.</th>
                <th style="font-size: 12px" rowspan=2>Observação</th>
            </tr>
            <tr class="teste">
                <th style="font-size: 12px">Tem</th>
                <th style="font-size: 12px">Não Tem</th>
                <th style="font-size: 12px">Tem</th>
                <th style="font-size: 12px">Não Tem</th>
                <th style="font-size: 12px">Tem</th>
                <th style="font-size: 12px">Não Tem</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>
            <tr>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
                <td class="text-right">10</td>
                <td class="text-center">-</td>
                <td class="text-right">10</td>
            </tr>

        </tbody>
    </table>
</div>