こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html <table class="table01"> <thead> <tr> <th></th> <th>ヘッダー1</th> <th>ヘッダー2</th> <th>ヘッダー3</th> </tr> </thead> <tbody> <tr> <th>項目1</th> <td label="ヘッダー1"><p>項目1の内容<br /> これで長くなった時に対応できます。</p></td> <td label="ヘッダー2"><p>項目1の内容</
![コピペ可!CSSだけでレスポンシブテーブルをつくろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c0912d2c5ce16499ad2f6ce40fce74fad57c993/height=288;version=1;width=512/https%3A%2F%2Fblog.8bit.co.jp%2Fwp-content%2Fuploads%2F2022%2F01%2Feyecatch8.png)