<!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>
やっちまったなぁ