« □3色色覚は笑顔のために進化した | トップページ | ◇四色型色覚では三色型では想像不能な色を感じるか »

◇cssでセル幅を指定するとcolspanで破綻する

cssによるテーブルセル属性指定は、n番目という制御がcolspanに 対応していないため、colspanがあるとグチャグチャになります。

基本テーブル

1234
1234

cssでwidthを指定したもののcolspan設定(異常発生)

1-234
1234

12-34
1234

123-4
1234

colgroupでwidthを指定したもののcolspan設定(正常)

1-234
1234

12-34
1234

123-4
1234

 CSS3によるwidthは行連結(colspan)で破綻する

HTML5のcss3でのカラム情報設定は colspanに対応しないため、デタラメなものとなってしまいます。
遊びならHTML5-css3で問題ありませんが、仕事の場合は colgroupを使う方 がよいでしょう。

<style type="text/css">
   table.tbl1 {border:1px solid black;
               border-collapse:collapse;font-size:12pt}
   table.tbl1 td{border:1px solid black}
   table.tbl1 th{border:1px solid black}
   table.tbl1 td:nth-child(1){width:50px;background-color:#9370db}
   table.tbl1 td:nth-child(2){width:30px;background-color:#f0f8ff}
   table.tbl1 td:nth-child(3){width:200px;background-color:#90ee90}
   table.tbl1 td:nth-child(4){width:40px;background-color:#eee8aa}
</style>
以下に、テーブル定義とその表示を載せます。
ここでは1-2セル連結、2-3セル連結で長さがおかしくなっています。うまくここで例は 作れませんが、先頭行セルの連結ではおかしくなるけど、2番目以降の行の 連結では問題がでないこともありました。
<table class=tbl1> <!-- 連結無し -->
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
1234
1234

<table class=tbl1> <!-- 1-2セル連結(先頭行) -->
<tr><td colspan=2>1-2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
1-234
1234
<table class=tbl1> <!-- 1-2セル連結(第2行) -->
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td colspan=2>1-2</td><td>3</td><td>4</td></tr>
</table>
1234
1-234

<table class=tbl1> <!-- 2-3セル連結(先頭行) -->
<tr><td>1</td><td colspan=2>2-3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
12-34
1234
<table class=tbl1> <!-- 2-3セル連結(第2行) -->
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td colspan=2>2-3</td><td>4</td></tr>
</table>
1234
12-34

<table class=tbl1> <!-- 3-4セル連結(先頭行) -->
<tr><td>1</td><td>2</td><td colspan=2>3-4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
123-4
1234

<table class=tbl1> <!-- 1-2,3-4セル連結(先頭行) -->
<tr><td colspan=2>1-2</td><td colspan=2>3-4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
1-23-4
1234

 colgroupなら問題ない

cssを使わずcolgroupを使う場合問題はありません。

<style type="text/css">
   table.tbl2 {border:1px solid black;
               border-collapse:collapse;font-size:12pt}
   table.tbl2 td{border:1px solid black}
   table.tbl2 th{border:1px solid black}
</style>

<table class=tbl2> <!-- 連結無し -->
<colgroup> 
  <col style='width:50px;background-color:#9370db'>
  <col style='width:30px;background-color:#f0f8ff'>
  <col style='width:200px;background-color:#90ee90'>
  <col style='width:40px;background-color:#eee8aa'>
</colgroup>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
1234
1234

<table class=tbl2> <!-- 1-2セル連結 -->
<colgroup>
  <col style='width:50px;background-color:#9370db'>
  <col style='width:30px;background-color:#f0f8ff'>
  <col style='width:200px;background-color:#90ee90'>
  <col style='width:40px;background-color:#eee8aa'>
</colgroup>
<tr><td colspan=2>1-2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
1-234
1234

<table class=tbl2> <!-- 2-3セル連結 -->
<colgroup>
  <col style='width:50px;background-color:#9370db'>
  <col style='width:30px;background-color:#f0f8ff'>
  <col style='width:200px;background-color:#90ee90'>
  <col style='width:40px;background-color:#eee8aa'>
</colgroup>
<tr><td>1</td><td colspan=2>2-3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
12-34
1234

<table class=tbl2> <!-- 3-4セル連結 -->
<colgroup>
  <col style='width:50px;background-color:#9370db'>
  <col style='width:30px;background-color:#f0f8ff'>
  <col style='width:200px;background-color:#90ee90'>
  <col style='width:40px;background-color:#eee8aa'>
</colgroup>
<tr><td>1</td><td>2</td><td colspan=2>3-4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
123-4
1234

|

« □3色色覚は笑顔のために進化した | トップページ | ◇四色型色覚では三色型では想像不能な色を感じるか »

トラックバック


この記事へのトラックバック一覧です: ◇cssでセル幅を指定するとcolspanで破綻する:

« □3色色覚は笑顔のために進化した | トップページ | ◇四色型色覚では三色型では想像不能な色を感じるか »