表組みの幅

作ってみた

表組み課題で、2列目が細くなる

課題を見た時に、
　「2列目だけが細い。どうしてかな？　ここだけCSSで幅指定？」
って思いました。
でも、表を組み上げると自然に2列目だけが細くなっています。
理由はわからないけれど、課題の表と同じっぽいので、とりあえず提出。

幅は、セル内のコンテンツの量に影響される

で、質問しました。
答えは、
　「セルの幅は、セル内のコンテンツの量に影響される」 ってこと。
2列目の数字のみが一桁で、それ以外の列は二桁数字を含んでいます。
だから、2列目だけが細かったのですね。

ならば、2列目にも二桁数字を入れてあげると、
無事、均等に表示されました。

この問題は、以前、テーブルレイアウトでサイトを構成していた時に、
レイアウトが崩れる原因でもあったそうです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>表組み</title>
<style type="text/css">
<!--
table {
	width: 300px;
	height: 300px;
	border: 1px #000000 solid;
	border-collapse: collapse;
	font-family:
          "Hiragino Kaku Gothic Pro",
          "ヒラギノ角ゴ Pro W3",
          Meiryo,
          "メイリオ",
          Osaka,
          "MS PGothic",
          "ＭＳ Ｐゴシック",
          sans-serif;
}
td {
	text-align: left;
	vertical-align: middle;
	border: 1px #000000 solid;
}
span{
	color: red;
}
-->
</style>
</head>

<body> 
<table>
  <tr>
      <td>１</td>
      <td><span>22</span></td>
      <td rowspan="2">３</td>
      <td>４</td>
      <td>５</td>
  </tr>
  <tr>
      <td>６</td>
      <td rowspan="4">７</td>
      <td colspan="2">８</td>
  </tr>
  <tr>
      <td rowspan="2">９</td>
      <td colspan="3">10</td>
  </tr>
  <tr>
      <td colspan="2">11</td>
      <td rowspan="2">12</td>
  </tr>
  <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
  </tr>
</table>
</body>
</html>