レスポンシブなテーブルと文字フォントを実現したい

Question

###レスポンシブなテーブルと文字フォントを実現したい

デバイスによってレスポかつ、テーブルタグ内のセルの文字数に応じて列幅が可変になるテーブルを実装したいです。例えば、下記のようなテーブルで※が付いた特定列のみ文字数に応じて列幅が可変かつ文字フォントも可変、もう片方の列はフォントのみ可変...というものを作りたいです。

---

<table> <tr align="center"> ※<th bgcolor="#f0ffff">ほげ</th> <th bgcolor="#f0ffff">ほげほげ</th> </tr> <tr> ※<td align="center">ほげ</td> <td>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</td> </tr> <tr> ※<td>ほげほげ</td> <td>ほげほげほげほげほげほげほげ</td> </tr> <tr> ※<td>ほげほげほげほげ</td> <td>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</td> </tr> </table>

---

勉強不足で、質問の仕方も分かりにくいかもしれませんが、ご教示いただけると幸いです。
よろしくお願いいたします...！

Comments

[kai0310]

まず、コードを提示する際はMarkDown記法を使用してください。
https://teratail.com/help#about-markdown

[Lhankor_Mhy]

「文字フォントも可変」というのは、font-sizeのことでいいんですよね？
だとすると、CSSでは難しいと思います。内部の文字数を参照する方法がないのでは。

Answer 1

こちらでいかがでしょうか?

tr > *:first-child {
  white-space: nowrap;
}