tableのレスポンシブ対応

Question

レスポンシブした際に、iphoneのsafariでtableのthとtdをdisplay：block;にし、width:100%;を指定しているのですが、td要素のみ画面幅いっぱいにならず、コンテンツ分しか幅出ません。
thは画面幅いっぱいになっています。
原因としてどのようなことが考えられるでしょうか。

htmlは以下のように組んでいます。

<table>
<tr>
<th>title</th>
<td>aaaa</td>
</tr>
<tr>
<th>title</th>
<td>aaaa</td>
</tr>
</table>

Comments

[s-show]

原因はCSSの設定だと思いますので、CSSファイルも示して頂けますか。

Answer 1

問題なく表示されていますね

<style>
td,th{border:1px solid black;display：block;}
table{width:100%;}
</style>

Answer 2

おそらくthとtdが間違っているが原因だと思います。基本セルはtdで作成し、thは一番上のヘッダーの行のセルにしか使いません。以下の様な感じです。またtdやthが行ごとにtrで包まれるのは変わりません。

th	th
td	td
td	td

あと、表全体を画面幅いっぱいにしたいのならば、table要素自体をwidth: 100%にすれば可能だと思いまsy。

Comments

[LibertyBell3]

tr内に、th/tdが混在するのは、間違っていませんよ。
っていうか、良くあるケースかと。

[shin0807]

回答ありがとうございます。
thはヘッダー行にしか使えないということはtheadの中でしか使えないということでしょうか？
私的には、LibertyBell3さんの言うようによくあるケースだと思っていましたが認識が間違っているのでしょうか？

[退会済みユーザー]

すみません、翌巻上げてみたら別に縦並びテーブルだってありますし、たしかに表現がおかしいですねw

Answer 3

table {
width: 100%;
}
してみたらどうでしょうか？

文字が真ん中にこない場合はtext-align:center;
を入れてあげてください。

Comments

[shin0807]

回答ありがとうございます。
tableにwidth：100%;は設定済みになります。
android、PCのchromeデベロッパーツール、その他ブラウザの幅を縮めて確認した際には、問題なく幅100%になっています。