事の発端

いくら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' として解釈されているみたいです・・・
浅はかな自分に絶望し、再び歩き出そうと思います
コメントくれた先輩方、ありがとうございました！