【HTML】表の横幅を状況に応じて変えたい

Question

HTMLの初心者で表を作ることはできるのですが、表全体の横幅を状況に応じて変更したいです。

今は表の列幅をAuto、表の横幅を100％にしています。
文字数が多くかつスマホのような画面幅が小さいものでは途中で折り返しが行われるため、
非常に見ずらい表となってしまいます。

そこで基本は表の横幅を100％として、
文字数が多く表全体の横幅がある数値（例えば480px）を越えた場合は折り返しが行われないように表の横幅を広げスクロールで全体をみれるようにするということはできるのでしょうか。
できるのであればどのように記述するかも教えていただけると幸いです。

Answer 1

Bootstrapなんかでも使われている方法ですが、<table>を<div>などで囲んでそれにoverflow-x: auto;とすればお望みのようになるはずです。

<div class="table-responsive">
    <table>
    ...（省略）
    </table>
</div>

.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
}

Comments

[suteaka]

ご回答ありがとうございました。
無事スクロールしてくれるようになりました(^ ^)