Пластина HTML с установленной частью и Вы уезжаете с Scroll

Я должен реализовывать такую пластину как которая присоединяю в образе, это должно быть сходной и функционировать сходно только, что я не нахожу, как добивание этого. :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;
   }

Excelente
Bueno
Aceptable
Malo
Muy malo
JUGADOR POSICION AÑO
ARQUEROS
Cerda Favian Arquero 1990
Cerda Favian Arquero 1990
Cerda Favian Arquero 1990
DEFENSAS
CENTRALES
DELANTEROS
ALTURA PESO SUM6P %ADIP KG ADIP % MUSC KG MUSC ÍNDICE MUSCULAR ÓCEO (IMO)
EV1 EV2 EV1 EV2 EV1 EV2 EV1 EV2 EV1 EV2 EV1 EV2 EV1 EV2 EV1 EV2
182.1 182.1 91 91 63.5 61 20.2% Aceptable 20% Aceptable 18.4 Aceptable 18.2 Aceptable 51.8% Aceptable 51.6% Aceptable 37.3 Aceptable 37.2 Aceptable 3.65 Aceptable 3.57 Aceptable
182.1 182.1 91 91 63.5 61 20.2% Aceptable 20% Aceptable 18.4 Aceptable 18.2 Aceptable 51.8% Aceptable 51.6% Aceptable 37.3 Aceptable 37.2 Aceptable 3.65 Aceptable 3.57 Aceptable
182.1 182.1 91 91 63.5 61 20.2% Aceptable 20% Aceptable 18.4 Aceptable 18.2 Aceptable 51.8% Aceptable 51.6% Aceptable 37.3 Aceptable 37.2 Aceptable 3.65 Aceptable 3.57 Aceptable

У этой пластины должен быть Scroll в верхней прямой части, который, когда Вы это двинете, должны делать видимым другие части пластины, но только должна двигаться вся секция, которая с красным квадратом. оставшаяся часть должна пребывать статической, как я могу делать это?, у кого-то какой-то пример есть? я нуждаюсь в помощи. Спасибо

Дополнительно базовый кодекс пластины для того, чтобы Вы делались видимыми лучше, хотя в настоящее время не функционирует то, что желается.

2
задан 08.11.2019, 17:08
1 ответ

Вместо того, чтобы использовать подмостки внутри подмостков, лучше использовать div, ты можешь манипулировать div как подмостки с классами bootstrap капуста и row

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

Кроме этого в стиле оставил тебе пример, как ты можешь затрагивать все td, или все th, вместо того, чтобы помещать стиль каждому elmento

, Если ты хочешь быть более специфическим, ты можешь помещать th. NombreClase, так только ты затронешь все th, у которых есть определенный класс, я надеюсь и подайте тебе мой вклад

, Если queires, который adabten div в экран, возможно решать, если вместо того, чтобы помещать установленную ширину div (500px), ты используешь %, а именно в первый div, ты помещаешь ему width = 40 %, и в на 60 % такой segungo он приспособится к экрану, откуда был виден

  .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
ответ дан 01.12.2019, 12:16
  • 1
    Проблема этой solució n дело в том, что в устройствах с экраном pequeñ в, informació n видят " cortada" из-за así говорить это. – Oscar David Diaz Fortaleché 08.11.2019, 21:55
  • 2
    Возможно решать, если вместо того, чтобы помещать установленную ширину div, ты используешь %, а именно в первый div, ты помещаешь ему width = 40 % и в на 60 % такой segungo он приспособится к экрану, откуда видели – Manuel Alberto Gomez Lozano 08.11.2019, 22:01
  • 3
    Если, это верно. Давайте ждать, чем в compañ ero я последовал ему. – Oscar David Diaz Fortaleché 09.11.2019, 02:47

Теги

Похожие вопросы