Web ページのデザインに純粋な CSS を使用しています。私のページにこのテーブル/フォームがあります。残念ながら、それは私の画面の幅を超えています。画面に収まるようにテーブルを自動的にフォーマットするにはどうすればよいですか? テーブルがユーザーの画面幅に収まるまで、各列を「縮小」したいと思います。
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200">
<link rel="stylesheet" href="css/layouts/style_pure.css">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
<form class="pure-table">
<table class="pure-table">
<thead>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
<td>Col7</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</form>
</body>
</html>