Table does not take property bordered

Navigation
0

My table does not seem to take the class table-bordered , what's wrong?

This is my code: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row-fluid" style="margin-top: 10px;">
   <div class="row-fluid" style="margin-top:50px;">
       <div class="span12 table-responsive" style="margin-left: 0px;">
           <table id="detalleMigrante" name="detalleMigrante" class="table table-bordered">
               <thead>
                   <tr>
                       <th rowspan=2>Municipio </th>
                       <th rowspan=2>Area Frontera </th>
                       <th rowspan=2>Campamento/<br>Asentamiento </th>
                       <th rowspan="2">Procedencia</th>
                       <th colspan="3">N° Febriles<br>Encontrados</th>
                       <th rowspan="2">N° Gotas <br>Tomadas</th>
                       <th rowspan=2> Gota Gruesa<br>Positiva</th>
                       <th colspan=2> Tratamientos</th>
                       <th rowspan=3> Medidas Realizdas Contra <br>el Vector</th>
                       <th rowspan="2" style="width:45px;">Eliminar</th>
                   </tr>
                   <tr>
                       <th class="text-left">Actuales</th>
                       <th class="text-left">Recientes</th>
                       <th class="text-left">Tardios </th>
                       <th class="text-left">Curativos</th>
                       <th class="text-left">Preventivo</th>
                       <th style="width:30px;"></th>
                   </tr>

               </thead>
                <tbody id="content-tbody">
                    <tr id="tr-empty-legend"><td colspan="13">No se ha agregado ningun detalle</td></tr>
                </tbody>
            </table>
            <input id="totalCount" name="totalCount" type="hidden" value="0" />
        </div>
   </div>
</div>

And that's how it looks:

    
asked by Igmer Rodriguez 30.01.2018 в 18:53
source

2 answers

0

I answer here because I do not have enough reputation to do so in the comments but according to the documentation in Bootstrap:

link

(Bordered table Add.table-bordered for borders on all sides of the table and cells. )

The code you provide is performing the correct operation of what you indicate. Since it puts borders on the whole table and the cells.

The only mistake I see is in:

<th rowspan="2" style="width:45px;">Eliminar</th>

Since the rowspan is overflowing to the amount of the table.

Greetings.

    
answered by 30.01.2018 в 19:59
0

I understand, it seems that your problem is with the monitor and how it is calibrated, since I can also distinguish the edges.

Now if the question is how to make them darker, you can add the following line in your css: 

table.table-bordered thead th,
table.table-bordered td{
border-color: gray;  /*o color gris más oscuro o el color que desees*/
}

So you can see it in your code: 

table.table-bordered thead th,
table.table-bordered td{
  border-color: gray; /*o color gris más oscuro o el color que desees*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row-fluid" style="margin-top: 10px;">
   <div class="row-fluid" style="margin-top:50px;">
       <div class="span12 table-responsive" style="margin-left: 0px;">
           <table id="detalleMigrante" name="detalleMigrante" class="table table-bordered">
               <thead>
                   <tr>
                       <th rowspan=2>Municipio </th>
                       <th rowspan=2>Area Frontera </th>
                       <th rowspan=2>Campamento/<br>Asentamiento </th>
                       <th rowspan="2">Procedencia</th>
                       <th colspan="3">N° Febriles<br>Encontrados</th>
                       <th rowspan="2">N° Gotas <br>Tomadas</th>
                       <th rowspan=2> Gota Gruesa<br>Positiva</th>
                       <th colspan=2> Tratamientos</th>
                       <th rowspan=3> Medidas Realizdas Contra <br>el Vector</th>
                       <th rowspan="2" style="width:45px;">Eliminar</th>
                   </tr>
                   <tr>
                       <th class="text-left">Actuales</th>
                       <th class="text-left">Recientes</th>
                       <th class="text-left">Tardios </th>
                       <th class="text-left">Curativos</th>
                       <th class="text-left">Preventivo</th>
                       <th style="width:30px;"></th>
                   </tr>

               </thead>
                <tbody id="content-tbody">
                    <tr id="tr-empty-legend"><td colspan="13">No se ha agregado ningun detalle</td></tr>
                </tbody>
            </table>
            <input id="totalCount" name="totalCount" type="hidden" value="0" />
        </div>
   </div>
</div>

Now, I see that you are using many inline styles (of the type: style="width: 45px" ), I do not know the reason, but you should (it is a recommendation) use more css styles in a custom style sheet. It will be easier to maintain each table.

If this is not what you are looking for, write me in the comments to find a better solution.

    
answered by 30.01.2018 в 21:24
Event "onclick" within variable and Uncaught SyntaxError: Unexpected token} datapicker - range