2

Debo realizar una tabla como la que adjunto en la imagen, esta debe ser similar y funcionar similar tan solo que no encuentro como lograr eso. :S

introducir la descripción de la imagen aquí

   .table11a table>thead>tr{
        background-color: #333333; 
        color: white;
   }
   .table11a table>thead>th{
        background-color: #333333; 
        padding-top:5px; 
        padding-bottom:5px;
        text-align: center;
   }
   .table11a table>tbody>tr{
        border-right: 1px solid;
   }
   .table11a table>tbody>tr>td{
        border-right: 1px solid;
        text-align: center;
   }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span12" style="margin: 0px;width:100%">

        

<!----------------------------------Tabla Normal-------------------------------------------------------------------------->


            <table class="table11a" style="margin: 0px; width: 100%">
                <tbody><tr><th style="background-color:#555555; color:white; margin-right: 10px;border-top-left-radius: 3px;">
                    <div style="background-color: #639B5E; height: 10px; width: 10px; display: inline-block;"></div> 
                    <span style="margin-right: 10px">Excelente</span>   
                </th>
                <th style="background-color:#555555; color:white; margin-right: 10px;">
                    <div style="background-color: #9F972A; height: 10px; width: 10px; display: inline-block;"></div>
                    <span style="margin-right: 10px">Bueno</span>
                </th>
                <th style="background-color:#555555; color:white; margin-right: 10px;">
                    <div style="background-color: #A4434A; height: 10px; width: 10px; display: inline-block;"></div>
                    <span style="margin-right: 10px">Aceptable</span>
                </th>
                <th style="background-color:#555555; color:white; margin-right: 10px;">
                    <span style="margin-right: 10px">Malo</span>
                </th>
                <th style="background-color:#555555; color:white; margin-right: 10px; border-top-right-radius: 3px;">
                    <div style="background-color: #3B7AAF; height: 10px; width: 10px; display: inline-block;"></div>
                    <span style="margin-right: 10px;">Muy malo</span>
                </th>
                <th></th>
            </tr></tbody></table>


        <table class="span12" style="border: 0px solid #8f8f8f; width:100%; margin: 0px;" id="tabla_evaluacion">
            <tbody><tr><th>
            <table class="table-striped" style="font-family: 'Arial'">
                <thead>
                    <tr style="background-color:#555555; color:white; font-size: 12px;">
                        <th scope="col" style="width: 180px; text-align: left;">JUGADOR
                    </th>
                    <th scope="col" style="cursor:pointer; padding:0px; width: 100px; text-align: left;">
                        POSICION
                    </th>

                    <th scope="col" style="cursor:pointer; padding:0px; width: 36px; text-align: left;">
                        AÑO
                    </th>
                    </tr>
                </thead>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">ARQUEROS</th>
                    </tr>
                </thead>
                
                <tbody>
                    <tr>
                        <td> Cerda Favian</td>
                        <td>Arquero</td>
                        <td>1990</td>
                    </tr>
                    <tr>
                        <td> Cerda Favian</td>
                        <td>Arquero</td>
                        <td>1990</td>
                    </tr>
                    <tr>
                        <td> Cerda Favian</td>
                        <td>Arquero</td>
                        <td>1990</td>
                    </tr>
                </tbody>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">DEFENSAS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </tbody>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">CENTRALES</th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </tbody>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">DELANTEROS</th>
                    </tr>

<tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid;height: 15px;"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </tbody>
            </table>
            </th>
<!--////////////////////////////////    TABLA SCROLL     ////////////////////////////////////-->
            <th class="">
                <div style="overflow: scroll; overflow-y: hidden; width: 783px;">
                <table class="table-striped" style="font-family: 'Arial';">
                <thead>
                    <tr style="background-color:#555555; color:white; font-size: 12px;">
                        <th scope="col" colspan="2" style="">      ALTURA
                        </th>
                        <th scope="col" colspan="2" style="">      PESO
                        </th>
                        <th scope="col" colspan="2" style="">      SUM6P
                        </th>
                        <th scope="col" colspan="4" style="">      %ADIP
                        </th>
                        <th scope="col" colspan="4" style="">      KG ADIP
                        </th>
                        <th scope="col" colspan="4" style="">      % MUSC
                        </th>
                        <th scope="col" colspan="4" style="">      KG MUSC
                        </th>
                        <th scope="col" colspan="4" style="">      ÍNDICE MUSCULAR ÓCEO (IMO)
                        </th>
                        <th scope="col" style=" width: 500px;">
                        </th>
                    </tr>
                </thead>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th style="border-right: 1px solid grey; font-size: 14px;">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;">EV2</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;">EV2</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;">EV2</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV1</th>
                        <th style="border-right: 1px solid grey; font-size: 14px;" colspan="2">EV2</th>
                        <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="text-align: center;">
                        <td style="padding: 4px 8px;">182.1</td>
                        <td style="padding: 4px 8px; font-style: bold;">182.1</td>
                        <td style="padding: 4px 8px;">91</td>
                        <td style="padding: 4px 8px; font-style: bold;">91</td>
                        <td style="padding: 4px 8px;">63.5</td>
                        <td style="padding: 4px 8px; font-style: bold;">61</td>

                        <td style="padding: 4px 8px;">20.2%</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px; font-style: bold;">20%</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px;">18.4</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px; font-style: bold;">18.2</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px;">51.8%</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px; font-style: bold;">51.6%</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px;">37.3</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px; font-style: bold;">37.2</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px;">3.65</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td style="padding: 4px 8px; font-style: bold;">3.57</td>
                        <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                        <td></td>
                    </tr>
                    <tr style="text-align: center;">
                        <td style="padding: 4px 8px;">182.1</td>
                        <td style="padding: 4px 8px;">182.1</td>
                        <td style="padding: 4px 8px;">91</td>
                        <td style="padding: 4px 8px;">91</td>
                        <td style="padding: 4px 8px;">63.5</td>
                        <td style="padding: 4px 8px;">61</td>

                        <td style="padding: 4px 8px;">20.2%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">20%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">18.4</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">18.2</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">51.8%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">51.6%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">37.3</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">37.2</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">3.65</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">3.57</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td></td>
                    </tr>
                    <tr style="text-align: center;">
                        <td style="padding: 4px 8px;">182.1</td>
                        <td style="padding: 4px 8px;">182.1</td>
                        <td style="padding: 4px 8px;">91</td>
                        <td style="padding: 4px 8px;">91</td>
                        <td style="padding: 4px 8px;">63.5</td>
                        <td style="padding: 4px 8px;">61</td>

                        <td style="padding: 4px 8px;">20.2%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">20%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">18.4</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">18.2</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">51.8%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">51.6%</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">37.3</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">37.2</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">3.65</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td style="padding: 4px 8px;">3.57</td>
                        <td style="padding: 4px 8px;">Aceptable</td>

                        <td></td>
                    </tr>
                </tbody>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                        <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
                    </tr>
                </thead>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
                    </tr>
                </thead>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                        <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
                    </tr>
                </thead>
                </table>
                </div>
            </th>

        </tr></tbody></table>
<br>
    </div>

Esta tabla debe tener un Scroll en la parte superior derecha que cuando lo mueva, deben visualizarse otras partes de la tabla, pero solo debe moverse toda la seccion que esta con el recuadro rojo. el resto debe permanecer estatico, como puedo hacer esto?, alguien tiene algun ejemplo? necesito ayuda. Gracias

Adicionalmente el codigo base de la tabla para que se visualice mejor, aunque actualmente no funciona lo que se desea.

3
  • Pasanos el codigo HTML de tu tabla, asi lo podremos aditar el 8 nov. 2019 a las 14:54
  • @ManuelAlbertoGomezLozano Listo el 8 nov. 2019 a las 15:09
  • Prueba el codigo para ver si es lo que querias, cuando lo ejecutes, pruebalo con el boton de "Página completa" de lo contrario de pondra el div debajo por el tamaño el 8 nov. 2019 a las 16:00

1 respuesta 1

3

En lugar de usar tablas dentro de tablas, es mejor usar div, puedes manejar a los div como tablas con las clases de bootstrap col y row

https://getbootstrap.com/docs/4.0/layout/grid/

Ademas de esto en el estilo te deje un ejemplo de como puedes afectar todos los td, o todos los th, en lugar de ponerle el estilo a cada elmento

Si quieres ser mas especifico puedes poner th.NombreClase, asi solo afectaras todos los th que tengan determinada clase, espero y te sirva mi aporte

Si queires que se adabten los div a la pantalla, Se puede solucionar si en lugar de ponerle un ancho fijo(500px) a los div usas %, es decir al primer div, le pones width = 40% y al segungo un 60% asi se ajustara a la pantalla de donde se vea

  .table11a table>thead>tr{
        background-color: #333333; 
        color: white;
   }
   .table11a table>thead>th{
        background-color: #333333; 
        padding-top:5px; 
        padding-bottom:5px;
        text-align: center;
   }
   .table11a table>tbody>tr{
        border-right: 1px solid;
   }
   .table11a table>tbody>tr>td{
        border-right: 1px solid;
        text-align: center;
   }
/*Deverias de usar mas clases como esta en lugar de ponerl el estilo a cada TD*/
   td{
   	padding: 4px 8px;
   }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="span12" style="margin: 0px;width:100%">
<!----------------------------------Tabla Normal-------------------------------------------------------------------------->


	<table class="table11a" style="margin: 0px; width: 100%">
        <tbody><tr><th style="background-color:#555555; color:white; margin-right: 10px;border-top-left-radius: 3px;">
                <div style="background-color: #639B5E; height: 10px; width: 10px; display: inline-block;"></div> 
                <span style="margin-right: 10px">Excelente</span>   
            </th>
            <th style="background-color:#555555; color:white; margin-right: 10px;">
                <div style="background-color: #9F972A; height: 10px; width: 10px; display: inline-block;"></div>
                <span style="margin-right: 10px">Bueno</span>
            </th>
            <th style="background-color:#555555; color:white; margin-right: 10px;">
                <div style="background-color: #A4434A; height: 10px; width: 10px; display: inline-block;"></div>
                <span style="margin-right: 10px">Aceptable</span>
            </th>
            <th style="background-color:#555555; color:white; margin-right: 10px;">
                <span style="margin-right: 10px">Malo</span>
            </th>
            <th style="background-color:#555555; color:white; margin-right: 10px; border-top-right-radius: 3px;">
                <div style="background-color: #3B7AAF; height: 10px; width: 10px; display: inline-block;"></div>
                <span style="margin-right: 10px;">Muy malo</span>
            </th>
            <th></th>
        </tr></tbody>
    </table>

    <div id="tabla_evaluacion" style="float: left;">

    	<table class="table-striped" style="font-family: 'Arial'">
            <thead>
                <tr style="background-color:#555555; color:white; font-size: 12px;">
                    <th scope="col" style="width: 180px; text-align: left;">JUGADOR
                </th>
                <th scope="col" style="cursor:pointer; padding:0px; width: 100px; text-align: left;">
                    POSICION
                </th>

                <th scope="col" style="cursor:pointer; padding:0px; width: 36px; text-align: left;">
                    AÑO
                </th>
                </tr>
            </thead>
            <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">ARQUEROS</th>
                    </tr>
                </thead>
                
                <tbody>
                    <tr>
                        <td> Cerda Favian</td>
                        <td>Arquero</td>
                        <td>1990</td>
                    </tr>
                    <tr>
                        <td> Cerda Favian</td>
                        <td>Arquero</td>
                        <td>1990</td>
                    </tr>
                    <tr>
                        <td> Cerda Favian</td>
                        <td>Arquero</td>
                        <td>1990</td>
                    </tr>
                </tbody>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">DEFENSAS</th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </tbody>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">CENTRALES</th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </tbody>
                <thead>
                    <tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid; font-size: large;">DELANTEROS</th>
                    </tr>

				<tr style="background-color: #333; color: white;">
                        <th colspan="3" style="border-left: 1px solid;height: 15px;"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </tbody>
            </table>

</div>

<div id="table2" style="float: left;overflow: scroll; overflow-y: hidden; width: 783px;">

	<table class="table-striped" style="font-family: 'Arial';">
        <thead>
            <tr style="background-color:#555555; color:white; font-size: 12px;">
                <th scope="col" colspan="2" style="">      ALTURA
                </th>
                <th scope="col" colspan="2" style="">      PESO
                </th>
                <th scope="col" colspan="2" style="">      SUM6P
                </th>
                <th scope="col" colspan="4" style="">      %ADIP
                </th>
                <th scope="col" colspan="4" style="">      KG ADIP
                </th>
                <th scope="col" colspan="4" style="">      % MUSC
                </th>
                <th scope="col" colspan="4" style="">      KG MUSC
                </th>
                <th scope="col" colspan="4" style="">      ÍNDICE MUSCULAR ÓCEO (IMO)
                </th>
                <th scope="col" style=" width: 500px;">
                </th>
            </tr>
        </thead>
        <thead>
            <tr style="background-color: #333; color: white;">
                <th style="border-right: 1px solid grey; font-size: large;">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;">EV2</th>
                <th style="border-right: 1px solid grey; font-size: large;">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;">EV2</th>
                <th style="border-right: 1px solid grey; font-size: large;">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;">EV2</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV2</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV2</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV2</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV2</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV1</th>
                <th style="border-right: 1px solid grey; font-size: large;" colspan="2">EV2</th>
                <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
            </tr>
        </thead>
        <tbody>
            <tr style="text-align: center;">
                <td style="padding: 4px 8px;">182.1</td>
                <td style="padding: 4px 8px; font-style: bold;">182.1</td>
                <td style="padding: 4px 8px;">91</td>
                <td style="padding: 4px 8px; font-style: bold;">91</td>
                <td style="padding: 4px 8px;">63.5</td>
                <td style="padding: 4px 8px; font-style: bold;">61</td>

                <td style="padding: 4px 8px;">20.2%</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px; font-style: bold;">20%</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px;">18.4</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px; font-style: bold;">18.2</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px;">51.8%</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px; font-style: bold;">51.6%</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px;">37.3</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px; font-style: bold;">37.2</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px;">3.65</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td style="padding: 4px 8px; font-style: bold;">3.57</td>
                <td style="padding: 4px 8px; font-style: bold;">Aceptable</td>

                <td></td>
            </tr>
            <tr style="text-align: center;">
                <td style="padding: 4px 8px;">182.1</td>
                <td style="padding: 4px 8px;">182.1</td>
                <td style="padding: 4px 8px;">91</td>
                <td style="padding: 4px 8px;">91</td>
                <td style="padding: 4px 8px;">63.5</td>
                <td style="padding: 4px 8px;">61</td>

                <td style="padding: 4px 8px;">20.2%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">20%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">18.4</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">18.2</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">51.8%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">51.6%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">37.3</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">37.2</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">3.65</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">3.57</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td></td>
            </tr>
            <tr style="text-align: center;">
                <td style="padding: 4px 8px;">182.1</td>
                <td style="padding: 4px 8px;">182.1</td>
                <td style="padding: 4px 8px;">91</td>
                <td style="padding: 4px 8px;">91</td>
                <td style="padding: 4px 8px;">63.5</td>
                <td style="padding: 4px 8px;">61</td>

                <td style="padding: 4px 8px;">20.2%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">20%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">18.4</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">18.2</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">51.8%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">51.6%</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">37.3</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">37.2</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">3.65</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td style="padding: 4px 8px;">3.57</td>
                <td style="padding: 4px 8px;">Aceptable</td>

                <td></td>
            </tr>
        </tbody>
        <thead>
            <tr style="background-color: #333; color: white;">
                <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px" colspan="2"></th>
                <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
            </tr>
        </thead>
        <thead>
            <tr style="background-color: #333; color: white;">
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
            </tr>
        </thead>
        <thead>
            <tr style="background-color: #333; color: white;">
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th style="border-right: 1px solid grey; font-size: large; height: 20px;" colspan="2"></th>
                <th scope="col" style=" padding-top:5px; padding-bottom:5px; width: 500px;"></th>
            </tr>
        </thead>
    </table>

</div>


      

3
  • 1
    El problema de esta solución es que en dispositivos con pantalla pequeña, la información se ve "cortada" por así decirlo. el 8 nov. 2019 a las 19:55
  • 1
    Se puede solucionar si en lugar de ponerle un ancho fijo a los div usas %, es decir al primer div, le pones width = 40% y al segungo un 60% asi se ajustara a la pantalla de donde se vea el 8 nov. 2019 a las 20:01
  • Si, es cierto. Esperemos que al compañero le resulte. el 9 nov. 2019 a las 0:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.