mui 左右可滑動的表格

 

<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title"></h1>
		</header>
		<div class="mui-content">
			<div style="overflow: auto;padding: 0 0 10px 0;">
				<table border="1" class="tab_css_1">
					<thead>
						<th>順號</th>
						<th>01</th>
						<th>02</th>
						<th>03</th>
						<th>04</th>
						<th>05</th>
						<th>06</th>
						<th>07</th>
						<th>08</th>
						<th>09</th>
						<th>10</th>
						<th>11</th>
						<th>12</th>
						<th>13</th>
						<th>14</th>
						<th>15</th>
						<th>16</th>
						<th>17</th>
						<th>18</th>
						<th>19</th>
					</thead>
					<tr class="tr_css" align="center">
						<td>第一行</td>
						<td id="cz01"></td>
						<td id="cz02"></td>
						<td id="cz03"></td>
						<td id="cz04"></td>
						<td id="cz05"></td>
						<td id="cz06"></td>
						<td id="cz07"></td>
						<td id="cz08"></td>
						<td id="cz09"></td>
						<td id="cz10"></td>
						<td id="cz11"></td>
						<td id="cz12"></td>
						<td id="cz13"></td>
						<td id="cz14"></td>
						<td id="cz15"></td>
						<td id="cz16"></td>
						<td id="cz17"></td>
						<td id="cz18"></td>
						<td id="cz19"></td>
					</tr>
					<tr class="tr_css" align="center">
						<td>第二行</td>
						<td id="dy01"></td>
						<td id="dy02"></td>
						<td id="dy03"></td>
						<td id="dy04"></td>
						<td id="dy05"></td>
						<td id="dy06"></td>
						<td id="dy07"></td>
						<td id="dy08"></td>
						<td id="dy09"></td>
						<td id="dy10"></td>
						<td id="dy11"></td>
						<td id="dy12"></td>
						<td id="dy13"></td>
						<td id="dy14"></td>
						<td id="dy15"></td>
						<td id="dy16"></td>
						<td id="dy17"></td>
						<td id="dy18"></td>
						<td id="dy19"></td>
					</tr>
				</table>
			</div>

		</div>
table th {
	white-space: nowrap;
}

table td {
	white-space: nowrap;
}

body,
table {
	font-size: 12px;
}

table {
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}

table.tab_css_1 {
	border: 1px solid #cad9ea;
	color: #666;
}

table.tab_css_1 th {
	background-color: #FFFFFF;
	height: 30px;
}

table.tab_css_1 td,
table.tab_css_1 th {
	border: 0.5px solid #e5e5e5;
	padding: 0 1em 0;
}

table.tab_css_1 tr.tr_css {
	background-color: #FFFFFF;
	height: 30px;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章