Custom border for certain table columns

Question

Custom border for certain table columns

Asked 5 years, 12 months ago

Viewed 55 times

2

So, I have a page with a table that compares an amount of predicted items with an amount of items performed month by month.

That’s the way it is these days:

I was asked to put a line after each column of these fulfilled to be more separate, but I have no idea if it is possible and how to do this.

Would look like this:

And this is the code that generates this table:

<?php

                            require 'conn.php';

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

                            //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;
                            }

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

                            for($i = 0;$i < $num_fields; $i++){
                                $table .= '<th style="padding-right:5px;">'.$fields[$i].'</th>';
                            }

                            //Montando o corpo da tabela
                            $table .= '<tbody >';
                            while($r = mysqli_fetch_array($qry)){
                                $table .= '<tr>';
                                for($i = 0;$i < $num_fields; $i++){
                                    $table .= '<td>'.$r[$fields[$i]].'</td>';
                                }

                                // 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="FEV PREV" value="'.$r['FEV_PREV'].'">';
                                $table .= '<input type="hidden" name="FEV REAL" value="'.$r['FEV_REAL'].'">';
                                $table .= '<input type="hidden" name="MAR PREV" value="'.$r['MAR_PREV'].'">';
                                $table .= '<input type="hidden" name="MAR REAL" value="'.$r['MAR_REAL'].'">';
                                $table .= '<input type="hidden" name="ABR PREV" value="'.$r['ABR_PREV'].'">';
                                $table .= '<input type="hidden" name="ABR REAL" value="'.$r['ABR_REAL'].'">';
                                $table .= '<input type="hidden" name="MAI PREV" value="'.$r['MAI_PREV'].'">';
                                $table .= '<input type="hidden" name="MAI REAL" value="'.$r['MAI_REAL'].'">';
                                $table .= '<input type="hidden" name="JUN PREV" value="'.$r['JUN_PREV'].'">';
                                $table .= '<input type="hidden" name="JUN REAL" value="'.$r['JUN_REAL'].'">';
                                $table .= '<input type="hidden" name="JUL PREV" value="'.$r['JUL_PREV'].'">';
                                $table .= '<input type="hidden" name="JUL REAL" value="'.$r['JUL_REAL'].'">';
                                $table .= '<input type="hidden" name="AGO PREV" value="'.$r['AGO_PREV'].'">';
                                $table .= '<input type="hidden" name="AGO REAL" value="'.$r['AGO_REAL'].'">';
                                $table .= '<input type="hidden" name="SET PREV" value="'.$r['SET_PREV'].'">';
                                $table .= '<input type="hidden" name="SET REAL" value="'.$r['SET_REAL'].'">';
                                $table .= '<input type="hidden" name="OUT PREV" value="'.$r['OUT_PREV'].'">';
                                $table .= '<input type="hidden" name="OUT REAL" value="'.$r['OUT_REAL'].'">';
                                $table .= '<input type="hidden" name="NOV PREV" value="'.$r['NOV_PREV'].'">';
                                $table .= '<input type="hidden" name="NOV REAL" value="'.$r['NOV_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 O GRÁFICO
                                $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'].'">';
                                $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="FEV PREV" value="'.$r['FEV PREV'].'">';
                                $table .= '<input type="hidden" name="FEV REAL" value="'.$r['FEV REAL'].'">';
                                $table .= '<input type="hidden" name="MAR PREV" value="'.$r['MAR PREV'].'">';
                                $table .= '<input type="hidden" name="MAR REAL" value="'.$r['MAR REAL'].'">';
                                $table .= '<input type="hidden" name="ABR PREV" value="'.$r['ABR PREV'].'">';
                                $table .= '<input type="hidden" name="ABR REAL" value="'.$r['ABR REAL'].'">';
                                $table .= '<input type="hidden" name="MAI PREV" value="'.$r['MAI PREV'].'">';
                                $table .= '<input type="hidden" name="MAI REAL" value="'.$r['MAI REAL'].'">';
                                $table .= '<input type="hidden" name="JUN PREV" value="'.$r['JUN PREV'].'">';
                                $table .= '<input type="hidden" name="JUN REAL" value="'.$r['JUN REAL'].'">';
                                $table .= '<input type="hidden" name="JUL PREV" value="'.$r['JUL PREV'].'">';
                                $table .= '<input type="hidden" name="JUL REAL" value="'.$r['JUL REAL'].'">';
                                $table .= '<input type="hidden" name="AGO PREV" value="'.$r['AGO PREV'].'">';
                                $table .= '<input type="hidden" name="AGO REAL" value="'.$r['AGO REAL'].'">';
                                $table .= '<input type="hidden" name="SET PREV" value="'.$r['SET PREV'].'">';
                                $table .= '<input type="hidden" name="SET REAL" value="'.$r['SET REAL'].'">';
                                $table .= '<input type="hidden" name="OUT PREV" value="'.$r['OUT PREV'].'">';
                                $table .= '<input type="hidden" name="OUT REAL" value="'.$r['OUT REAL'].'">';
                                $table .= '<input type="hidden" name="NOV PREV" value="'.$r['NOV PREV'].'">';
                                $table .= '<input type="hidden" name="NOV REAL" value="'.$r['NOV 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>';

                            }

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


                            //Imprimindo a tabela
                            echo '<div class="table-table" style="overflow-x:auto;">';
                            echo $table;
                    ?>

Thank you, guys.

2 answers

2

With CSS3 you can do this by using Nth-Child

Example:

td {
  border-right: 2px solid red;
  padding: 20px;
}

td:nth-child(odd){
    border-right: 2px solid blue;
}

<table>
    <tr>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
    </tr>
    
    <tr>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
    </tr>
    
    <tr>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
    </tr>
    
    <tr>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
        <td>Teste</td>
    </tr>
</table>

1

So, actually that’s exactly it, I just took the red line to get one blue line every two columns. Solved. Thank you.

– Mariana Bayonetta

2018/07/06 at 12:30

Browser other questions tagged php html css table

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

by Wallace Maxters • **102,340** points · Answer 1 · 2018-07-06T12:24:00+00:00

Thus?

.table{
    border-collapse: collapse;
}

.table tr td{
  border-right: 5px solid lightblue;
}

.table tr td:last-of-type{
 border-right: none;
}

<table class="table">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

Note: I used the last-of-type to remove the border when the element td is the last