Таблицы вертикального и горизонтального заголовка делают его адаптивным для мобильных устройств - PullRequest
Новая
       13

Таблицы вертикального и горизонтального заголовка делают его адаптивным для мобильных устройств

0 голосов
/ 31 марта 2019

У меня есть следующая аналогичная таблица данных, которая включала много вертикальных и горизонтальных заголовков, Исходный код JS fiddle

enter image description here

@media only screen and (min-device-width: 600px) and (max-device-width: 800px) {
	body {
		width: 800px;
	}
}


table, caption, tbody, tfoot, thead, tr, th, td {
	vertical-align : middle;
	border-spacing : 0;
	border-collapse: collapse;
	
	
}


.c_fix:after {
	content   : ".";
	visibility: hidden;
	display   : block;
	height    : 0;
	clear     : both;
}


.c_fix {
	min-height: 1px;
}

* html .c_fix {
	height: 1px;

}

html{
	height    : 100%;
	overflow-y: scroll;
}


.floatL { float: left!important; }


div.borderNormal            { border: 2px solid #808080; }
table.borderNormal tr td    { border: 2px solid #808080; }

.bColorBlue{ background-color: #60a0f0; color: #ffffff; }
.bColorRed { background-color: #B22222; color: #ffffff; }
.bColorYellow {background-color: #A4B029; color: #ffffff;}

.center { text-align: center; }

tr.height_Row  { height: 28px;}


table.dataDisplay tr td {
	padding   : 2px;
}


table.tableBorder tr td    { border: 3px solid #808080; }

.floatLeft { float: left!important; }
.floatR { float: right!important; }


.colorChange tbody           { background-color: #ffffff; }		
.colorChange tbody tr:hover  { background-color: #73C959; }	

table.borderL,
table.borderL tr td {
	border-left: 0px;
}


div.DataWidth   { width: 600px; }
div.DataHeight { height: 350px; }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Test</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
			<div class="c_fix">
				<div id="LColumn" class="floatLeft">
					<table class=" tableBorder">
						<tbody><tr class="height_Row "><td class="bColorBlue center">Header1</td></tr>
						<tr class="height_Row"><td class="bColorBlue center">Header2</td></tr>
						<tr class="height_Row"><td class="bColorBlue center">Header3</td></tr>
					</tbody></table>
				</div>

				<div id="RColumn" class="floatLeft  DataWidth">
					<div id="divPointList" class="center">
						<table class="dataDisplay tableBorder borderL floatLeft">
							<tbody><tr class="height_Row"><td class="bColorRed" >HEAD (A)</td></tr>
							<tr class="height_Row"><td class="bColorRed">HEAD2 (A)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD3 (A)</td></tr>

						</tbody></table>
						<table class="dataDisplay tableBorder borderL floatLeft">
							<tbody><tr class="height_Row"><td class="bColorRed" >HEAD (B)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD2  (B)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD3  (B)</td></tr>
						</tbody></table>
						<table class="dataDisplay tableBorder borderL floatLeft">
							<tbody><tr class="height_Row"><td class="bColorRed" >HEAD (C)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD2 (C)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD3 (C)</td></tr>
						</tbody></table>
						<table class="dataDisplay tableBorder borderL floatLeft">
							<tbody><tr class="height_Row"><td class="bColorRed" colspan="2">HEAD (D)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD2 (D)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD3 (D)</td></tr>
						</tbody></table>
						<table class="dataDisplay tableBorder borderL floatLeft">
							<tbody><tr class="height_Row"><td class="bColorRed" >HEAD (E)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD2 (E)</td></tr>
							<tr class="height_Row"><td class="bColorRed" >HEAD3 (E)</td></tr>

						</tbody></table>			
					</div>
				</div>
			</div>
			<div class="clearfix">
				<div id="leftColumn2" class="floatLeft  DataHeight" >
				  <table class="dataDisplay tableBorder floatLeft">
						<tbody>
						<tr><td style="width:50px"  class="bColorYellow center">00:00</td></tr>
						<tr><td  class="bColorYellow center">01:00</td></tr>
						<tr><td  class="bColorYellow center">02:00</td></tr>
						<tr><td  class="bColorYellow center">03:00</td></tr>
						<tr><td  class="bColorYellow center">04:00</td></tr>
						<tr><td  class="bColorYellow center">05:00</td></tr>
						<tr><td  class="bColorYellow center">06:00</td></tr>
						<tr><td  class="bColorYellow center">07:00</td></tr>
						<tr><td class="bColorYellow center">08:00</td></tr>
						<tr><td  class="bColorYellow center">09:00</td></tr>
						<tr><td class="bColorYellow center">10:00</td></tr>
					</tbody></table>
				</div>
				<div>
					<div >
						<table class="dataDisplay tableBorder colorChange floatLeft">
							<tbody><tr>
								<td >D (A)</td>
								<td>D (A)</td>
							</tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
							<tr><td>D (A)</td><td>D (A)</td></tr>
						</tbody></table>
						<table class="dataDisplay tableBorder colorChange borderL floatLeft">
							<tbody><tr><td >D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							<tr><td>D (B)</td><td>D (B)</td></tr>
							
						</tbody></table>
						<table class="dataDisplay tableBorder colorChange borderL floatLeft">
							<tbody><tr>
								<td>D (C)</td>
								<td>D (C)</td>
							</tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							<tr><td>D (C)</td><td>D (C)</td></tr>
							
						</tbody></table>
						<table class="dataDisplay tableBorder colorChange borderL floatLeft">
							<tbody><tr>
								<td >D (D)</td>
								<td >D (D)</td>
							</tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							<tr><td>D (D)</td><td>D (D)</td></tr>
							
						</tbody></table>
						<table class="dataDisplay tableBorder colorChange borderL floatLeft">
							<tbody><tr>
								<td>D (E)</td>
								<td>D (E)</td>
							</tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							<tr><td>D (E)</td><td>D (E)</td></tr>
							
						</tbody></table>
						
			</div>
				</div>
				</div>
	</div>
</body>
</html>

Мне нужно было отобразить заголовок (синий), заголовок (красный) и время, включая столбец, который включается в качестве данных (D [A]) в мобильном устройствепри прокрутке заставляет другие данные отображаться с цветной головкой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...