How to put the scroll bar on the table

Navigation
1

I have a table with a bar ( overflow-x ) to scroll to the sides.

The bar is under the table, but I would like it to stay on top. I already took it from the div, put it back, tried to put the impression of the bar before the table, but it always stays down. 

<?php

require 'conn.php';

//Conexão e consulta ao Mysql
$qry = mysqli_query($lnk, "select * from banco");

//Pegando os nomes dos campos
$num_fields = mysqli_num_fields($qry); //Obtém o número de campos do resultado

for($i = 0; $i < $num_fields ; $i++){ //Pega o nome dos campos
    $fields[] = mysqli_fetch_field_direct($qry, $i)->name;
}

//$barrinha imprime aquela barrinha que tem no final da tabela.
$barrinha .= '<div class="table-table" style="overflow-x:scroll;">';
echo $barrinha;

//Montando o cabeçalho da tabela
$table = '<table class="table table-striped table-inverse"> <tr style="">';

for($i = 0; $i < $num_fields; $i++){
    $table .= '<th>' . $fields[$i] . '</th>';
}

// Montando o corpo da tabela
// Tá meio gambiarrado mas pelo menos funciona.

$table .= '<tbody>';

$vermelho_jan = 0;
$verde_jan = 0;
$vermelho_dez = 0;
$verde_dez = 0;

while($r = mysqli_fetch_array($qry)) {

    $table .= '<tr>';

    if ($r['ID'] > $r['ID']) {
        $table .= '<td>' . $r['ID'] . '</td>';
    } else {
        $table .= '<td>' . $r['ID'] . '</td>';
    }

    if ($r['KPI'] > $r['KPI']) {
        $table .= '<td style="font-weight:bolder; width:120px !important;">' . $r['KPI'] . '</td>';
    }else{
        $table .= '<td style="font-weight:bolder;">' . $r['KPI'] . '</td>';
    }

    if ($r['PILOTE'] > $r['PILOTE']) {
        $table .= '<td>' . $r['PILOTE'] . '</td>';
    } else {
        $table .= '<td>' . $r['PILOTE'] . '</td>';
    }

    //Aqui começam os meses
    if ($r['JAN_PREV'] > $r['JAN_REAL']) {
        $table .= '<td>' . $r['JAN_PREV'] . '</td>';
        $table .= '<td style="background:#ff4545;">' . $r['JAN_REAL'] . '</td>';
        $vermelho_jan += 1;
    } else {
        $table .= '<td>' . $r['JAN_PREV'] . '</td>';
        $table .= '<td style="background:#c3f786;">' . $r['JAN_REAL'] . '</td>';
        $verde_jan += 1;
    }

    if ($r['DEZ_PREV'] > $r['DEZ_REAL']) {
        $table .= '<td>' . $r['DEZ_PREV'] . '</td>';
        $table .= '<td >' . $r['DEZ_REAL'] . '</td>';
        $vermelho_dez += 1;
    } else {
        $table .= '<td>' . $r['DEZ_PREV'] . '</td>';
        $table .= '<td >' . $r['DEZ_REAL'] . '</td>';
        $verde_dez += 1;
    }


    $table .= '<div class="table-table" style="overflow-x:auto;">';

    // Adicionando botão de edição
    $table .= '<td><form action="qualite-edicao.php" method="post">'; 
    $table .= '<input type="hidden" name="ID" value="' . $r['ID'] . '">';
    $table .= '<input type="hidden" name="KPI" value="' . $r['KPI'] . '">';
    $table .= '<input type="hidden" name="PILOTE" value="' . $r['PILOTE'] . '">';
    $table .= '<input type="hidden" name="JAN PREV" value="' . $r['JAN_PREV'] . '">';
    $table .= '<input type="hidden" name="JAN REAL" value="' . $r['JAN_REAL'] . '">';
    $table .= '<input type="hidden" name="DEZ PREV" value="' . $r['DEZ_PREV'] . '">';
    $table .= '<input type="hidden" name="DEZ REAL" value="' . $r['DEZ_REAL'] . '">';
    $table .= '<button class="btn btn-primary"><i class="fa fa-calendar-o" aria-hidden="true"></i></i> Editar </i></button>'; //
    $table .= '</form></td>';

    //MODAL COM OS GRÁFICOS
    $table .= '<td><form action="graf-qualite.php" method="post">'; 
    $table .= '<input type="hidden" name="ID" value="' . $r['ID'] . '">';
    $table .= '<input type="hidden" name="KPI" value="' . $r['KPI'] . ' style="">';
    $table .= '<input type="hidden" name="PILOTE" value="' . $r['PILOTE'] . '">';
    $table .= '<input type="hidden" name="JAN PREV" value="' . $r['JAN PREV'] . '">';
    $table .= '<input type="hidden" name="JAN REAL" value="' . $r['JAN REAL'] . '">';
    $table .= '<input type="hidden" name="DEZ PREV" value="' . $r['DEZ PREV'] . '">';
    $table .= '<input type="hidden" name="DEZ REAL" value="' . $r['DEZ REAL'] . '">';
    $table .= '<!-- Button -->
                <button type="button" class="btn btn-info button" data-toggle="modal" data-target="#exampleModal" name="button" onclick="abreModal(' . $r['ID'] .');">
                Gráfico
                </button>

                <!-- Modal -->

                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" onload="click("button");">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Gráfico</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>';
    $table .= '</form></td>';
}

$table .= '<tr>
            <td></td>
            <td style="background-color:#c3f786; font-weight:bolder;">GREEN</td>
            <td style="background-color:#c3f786;"></td>
            <td></td>
            <td style="font-weight:bolder;">' . $verde_jan . '</td>
            <td></td>
            <td style="font-weight:bolder;">' . $verde_dez . '</td>
        </tr>';
$table .= '<tr>
            <td></td>
            <td style="background-color:#ff4545; font-weight:bolder;">RED</td>
            <td style="background-color:#ff4545;"></td>
            <td></td>
            <td style="font-weight:bolder;">' . $vermelho_jan . '</td>
            <td></td>
            <td style="font-weight:bolder;">' . $vermelho_dez . '</td>
        </tr>';

//Finalizando a tabela
$table .= '</tbody></table>';

echo $table;

    
asked by anonymous 17.09.2018 / 14:19

1 answer

3

This SOEN answer uses a very interesting hack.

The hack consists of having a <div> involving the table, so just use CSS Rotate to rotate the <div> by 180 ° and also rotate the table by 180 °.

In this way the <div> rotates 180 ° and the table rotates 360 ° because it is contained in <div> .

Here's an example: 

/* Estilização da tabela */
table {
  border-collapse: collapse;
  border: 1px solid #555;
}

table th,
table td{
  border: 1px solid #888;
  text-align: center;
}

/* Limita o tamanho da tabela para ter scroll */
.wrapper {
  width: 300px;
  overflow-x: auto;
}


/*
Gira a <div> e a <table> em 180°
ou seja, a div gira 180° e a
a table gira 360°
*/
.wrapper,
.content {
  transform: rotate(180deg);
}
<div class="wrapper">
    <table class="content">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>Header 7</th>
                <th>Header 8</th>
                <th>Header 9</th>
                <th>Header 10</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
            </tr>
            <tr>
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
            </tr>
        </tbody>
    </table>
</div>
    
17.09.2018 / 14:46
Methods with several PHP parameters Error: can not convert from double to float