Author: tester

Posted on

code

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<style>
			td{
				border:1px solid #ccc
			}
			table.test{
				width:auto;
			}
			.test td{
				width:auto;
			}
			.table-wrapper{
				max-width:100%;
				overflow-x:scroll;
				overflow-y:hidden;
			}
		</style>
	</head>

	<body>
		<header><h1>table要素の幅の上書きと、ブラウザ幅がテーブル幅を下回る場合のはみ出しコントロール</header>
		<article>
			<div class="entry-content">
				<table width="474">
					<thead>
						<tr>
							<td width="90">data</td>
							<td width="64">a</td>
							<td width="64">b</td>
							<td width="64">c</td>
							<td width="64">d</td>
							<td width="64">e</td>
							<td width="64">f</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td width="64">a</td>
							<td width="64">b</td>
							<td width="64">c</td>
							<td width="64">e</td>
							<td width="64">r</td>
							<td width="64">f</td>
						</tr>
						<tr>
							<td width="90">2</td>
							<td width="64">f</td>
							<td width="64">c</td>
							<td width="64">f</td>
							<td width="64">s</td>
							<td width="64">s</td>
							<td width="64">a</td>
						</tr>
						<tr>
							<td width="90">3</td>
							<td width="64">1%</td>
							<td width="64">2%</td>
							<td width="64">3%</td>
							<td width="64">4%</td>
							<td width="64">5%</td>
							<td width="64">6%</td>
						</tr>
						<tr>
							<td width="90">4</td>
							<td width="64">7%</td>
							<td width="64">8%</td>
							<td width="64">9%</td>
							<td width="64">0%</td>
							<td width="64">1%</td>
							<td width="64">2%</td>
						</tr>
					</tbody>
				</table>
				<h2>CSSを追加</h2>
				<p>width属性を上書きする</p>
				<table width="474" class="test">
					<thead>
						<tr>
							<td width="90">data</td>
							<td width="64">a</td>
							<td width="64">b</td>
							<td width="64">c</td>
							<td width="64">d</td>
							<td width="64">e</td>
							<td width="64">f</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td width="64">a</td>
							<td width="64">b</td>
							<td width="64">c</td>
							<td width="64">e</td>
							<td width="64">r</td>
							<td width="64">f</td>
						</tr>
						<tr>
							<td width="90">2</td>
							<td width="64">f</td>
							<td width="64">c</td>
							<td width="64">f</td>
							<td width="64">s</td>
							<td width="64">s</td>
							<td width="64">a</td>
						</tr>
						<tr>
							<td width="90">3</td>
							<td width="64">1%</td>
							<td width="64">2%</td>
							<td width="64">3%</td>
							<td width="64">4%</td>
							<td width="64">5%</td>
							<td width="64">6%</td>
						</tr>
						<tr>
							<td width="90">4</td>
							<td width="64">7%</td>
							<td width="64">8%</td>
							<td width="64">9%</td>
							<td width="64">0%</td>
							<td width="64">1%</td>
							<td width="64">2%</td>
						</tr>
					</tbody>
				</table>
				<h2>CSSを追加</h2>
				<p>モバイル時に、表がはみ出す問題を調整する</p>
				<p>tdの幅の上書きは、行っていない</p>
				<p>table要素を、div class="table-wrapper" を追加</p>
				<div class="table-wrapper">
					<table width="474" class="test2">
						<thead>
							<tr>
								<td width="90">data</td>
								<td width="64">a</td>
								<td width="64">b</td>
								<td width="64">c</td>
								<td width="64">d</td>
								<td width="64">e</td>
								<td width="64">f</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td width="64">a</td>
								<td width="64">b</td>
								<td width="64">c</td>
								<td width="64">e</td>
								<td width="64">r</td>
								<td width="64">f</td>
							</tr>
							<tr>
								<td width="90">2</td>
								<td width="64">f</td>
								<td width="64">c</td>
								<td width="64">f</td>
								<td width="64">s</td>
								<td width="64">s</td>
								<td width="64">a</td>
							</tr>
							<tr>
								<td width="90">3</td>
								<td width="64">1%</td>
								<td width="64">2%</td>
								<td width="64">3%</td>
								<td width="64">4%</td>
								<td width="64">5%</td>
								<td width="64">6%</td>
							</tr>
							<tr>
								<td width="90">4</td>
								<td width="64">7%</td>
								<td width="64">8%</td>
								<td width="64">9%</td>
								<td width="64">0%</td>
								<td width="64">1%</td>
								<td width="64">2%</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</article>
	</body>
</html>