Пластина HTML с установленной частью и Вы уезжаете с Scroll
Я должен реализовывать такую пластину как которая присоединяю в образе, это должно быть сходной и функционировать сходно только, что я не нахожу, как добивание этого. :S
.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
У этой пластины должен быть Scroll в верхней прямой части, который, когда Вы это двинете, должны делать видимым другие части пластины, но только должна двигаться вся секция, которая с красным квадратом. оставшаяся часть должна пребывать статической, как я могу делать это?, у кого-то какой-то пример есть? я нуждаюсь в помощи. Спасибо
Дополнительно базовый кодекс пластины для того, чтобы Вы делались видимыми лучше, хотя в настоящее время не функционирует то, что желается.
2
задан Maiker Leon
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
ответ дан Manuel Alberto Gomez Lozano
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