事の発端
いくらCSS3のflex-boxレイアウトが一般的になったとはいえ、いまだに現役バリバリあちこちで使われているtableレイアウト。
そんな中、つぎのようなやるせなさを感じたことはありませんか？
tableタグの
colspanで行ぶち抜きのレイアウトをしたいんだけど、列が何個あるのか数えるのめんどくさいし、列が増減するたびにcolspanの値も増やすのは正直しんどいわ`
理解しやすい具体例
なんでもいいですが、検索すると条件に一致した結果の一覧が表示されるようなWebサービスを運用しているとします。
| No | product id | product name | made in |
|---|---|---|---|
| 1 | A0001 | Peppar | Japan |
| 2 | A0002 | Watson | U.S. |
| 3 | A0003 | 先行者 | China |
検索結果が0件だった場合、それらしいメッセージを表示したいですよね
こんなかんじで
| No | product id | product name | made in |
|---|---|---|---|
| 該当するデータはありませんでした |
マークアップはこうなるのが一般的でしょうね
<tr><td colspan='4'>該当するデータはありませんでした</td></tr>
でもこれ・・・
カラムが増えたら colspan の指定も変えなきゃダメじゃん・・・
tableの特性上、実際のカラム数より大きい数を指定しとけばちゃんと動くのはわかるけど、 colspan='100' とか何かキモいし・・・
そんなときには
<tr><td colspan='100%'>該当するデータはありませんでした</td></tr>
これでいい
| No | product id | product name | made in |
|---|
| 該当するデータはありませんでした |
結果、ベテランたちにフルボッコにされました
実際は % が無視されて、 colspan='100' として解釈されているみたいです・・・
浅はかな自分に絶望し、再び歩き出そうと思います
コメントくれた先輩方、ありがとうございました！