メディアクエリでChromeとsafariブラウザの時にテーブルレイアウトが崩れてしまう。

Question

外部CSSのスタイル設定にてメディアクエリを使用してレスポンシブ対応にしているのですが、chromeとsafariブラウザでテーブルwidthの%が反映されていないのか、スタイルが崩れます。

thとtdのみの2カラムテーブルで通常時は

table{
width:100%;
margin:0 auto;
border-collapse:collapse;
}
td, th{
border:1px solid #ccc;
padding:10px;
}
th{
width:25%;
font-weight:normal;
background:#efefef;
text-align:left;
}

メディアクエリ設定時は

/* スマフォ 縦 */
@media only screen and (max-width:480px){

table{
margin: 0 auto ;
}

table td, th{
width:100%;
display: block;
}

textarea {
resize: vertical;
}

}

上記のようにthとtd共にwidth:100%にし2カラムを1カラム風に設定し縦にthとtdが重なっていくよう設定しました。（参照にしたページ／http://www.unionnet.jp/develop/responsive-table-css/）
これがchromeとsafariブラウザで機能せず、通常時のwith:25%も600px以下になるとchromeでは機能せず、文字もはみ出ます。safariでは文字のはみ出しなどはありませんがth内の文字が改行されてしまいます。

そこで、webkit用のハックで以下のようにいれてみました。
（参照サイト／http://hack.aipo.com/archives/11050/ ）
（参照サイト／http://qiita.com/rico/items/cee85cbf1b6766f3cdb7 ）

/* chrome ウィンドウサイズが600px以上の時 */
@media all and (-webkit-min-device-pixel-ratio:0) {

table{
margin: 0 auto ;
width:100%;
word-wrap: break-word;
}

th{
margin: 0 auto ;
width: 25%;
}

td{
margin: 0 auto ;
}

textarea {
resize: vertical;
}

}

/* chrome ウィンドウサイズが600px以下の時 */
@media all and (-webkit-min-device-pixel-ratio:0) and (max-width:599px) {

table{
margin: 0 auto ;
width: 100%;
word-wrap: break-word;
}

td, th{
margin: 0 auto ;
display: block;
display: flex;
width:100% ;
word-wrap: break-word;
}

textarea {
resize: vertical;
}

}

上記ハックを入れる前はchromeではthとtdの枠が重なってしまっていたのですが、その重なりはなくなりました。
しかしテーブルは依然2カラムで、thが1文字分の細さでテキストが縦に並びtd内の文字もth側にめり込んだ状態です。

これを他のブラウザ（メインはfirefox）で確認した時のように、ウィンドウサイズが600px以下の時はthとtdがwidth:100%で縦に並んでいく様にしたいです。

当方使用パソコンはMAC、OSはX（10.6.8）です。普段使用のブラウザはfire foxです。
上に載せたのはテーブル部分のみの抜粋です。
CSSもhtmlもネットからコピーしながらどう動くのか試しつつ作っている状態です。
他に必要な情報がありましたら追記いたしますので、お伝えいただければ幸いです。

Answer 1

挙げていただいたコードでもこちらでは正常に表示されているような気がします。
問題になっている挙動と関係ないコードを省いたものが下記です、これが実現したいことの最小構成かと思いますが、こちらを試していただけますか？

<table>
  <tbody>
    <tr>
      <th>th</th>
      <td>td</td>
    </tr>
  </tbody>
</table>

table{ width:100%; }
th{ width: 25%; }

@media screen and (max-width:600px){
  td, th{
    width:100%;
    display: block;
  }
}

Comments

[Dizzyboy]

早速ご回答頂きありがとうございます。

いただいた内容でCSS とhtmlのテーブル部分をまっさらにした状態で一度組み直してみましたが、変化なしでした。
テーブルの中身がフォームでしたので中身を全部テキストに置き換えてたり、他の部分のCSSを一度排除したりしましたが変化がなかったので、他の部分のCSSは影響していないようです。

ダミーテキストをいれて、頂いた内容で組み直したテーブルが以下になります。
border とpaddingを入れてますが、自分で見て分かりやすいように入れています。
2番めのth内の<span>二字<span>は文字のbackgroundcolorをpaddingを使って四角の中に文字があるように見せています。ちなみにこのspanを入れても入れなくてもテーブルの挙動はほぼ変わりませんでした。（th部分が改行するかしないかの違いです）

html

<table>
<tbody>
<tr>
<th>th内容</th>
<td>
テストテストテスト
</td>
<tr>
<th>th内容<span>二字</span></th>
<td>
テストテストテスト2222
</td>
</tr>
</tbody>
</table>

/*テーブルCSS
---------------------------------------------------------------------------*/

table{
border-collapse:collapse;
font-size: 100%;
border-spacing: 0;
width:100%;}

th{ width: 25%;
height: auto ;
border: solid 1px #333;
padding: 7px;
}

td{ height: auto;
border: solid 1px #333;
padding: 7px;}

span {
margin-left: 5px;
padding: 3px;background-color: #F00;
color: #fff;
border-radius: 5px; /* CSS3草案 */
-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
-moz-border-radius: 5px; /* Firefox用 */
}

@media screen and (max-width:599px){
td, th{
width:100%;
display: block; }

textarea {
resize: vertical; }

}

/*　chrome & safari　　*/
@media all and (-webkit-min-device-pixel-ratio:0) {

th{ padding: 7px inherit; }
}

画面サイズは600px以下の全サイズに、メディアクエリが適応して欲しいので(max-width:599px)にしています。

レシポンシブ用の画面を確認する際は、Resizer（http://lab.maltewassermann.com/viewport-resizer/）と普通にウィンドウを小さくしたりしながら確認しています。
両方とも同じ風に崩れます。

どう崩れているか画像を添付したいのですがコメントでは画像添付はできないようできちんと説明できているのか微妙です。

chromeでは600px以下になっても依然、2カラムのままでtd部分がthの中にめり込んでいます。tdの枠がthの右がわにめり込んでます。何となくこれはtdとthに入れたpaddingではと思い一旦paddingを抜いたら重なりが少し減りました。しかし、中にテキストを入れるのでpaddingなしにはできません。

safariもchromeと同じ現象でしたが、
@media all and (-webkit-min-device-pixel-ratio:0) {
th{ padding: 7px inherit;}
}
を、入れたらtdがthの右側にめり込むのは防げました。
しかし、thとtdの線が重なり線が2重に見えてしまいます。

firefox画面では上記の症状はなく、600px以上ですとth幅25%でthとtdが横並び、600以下の画面の場合、thとtd両方の幅を100%に設定で縦に順にthとtd…となります。

最終形態はテーブルを利用したフォームを作成しており、thは項目でtdにはテキストとラジオボタン、テキストエリア、プルダウンなどが挿入予定です。

上記内容で何かお気づきの点がありましたらご一報いただけると幸いです。

[rossi46hiro]

やりたい事はおそらくこんな感じなんだろうと思いますがいかかでしょうか。
https://jsfiddle.net/4m9pxgnd/

[Dizzyboy]

Chromeに関しては解決しました！
rossi46hiro様、すいません、とても初歩的なことですがDOCTYPE宣言が間違っていました。
そこを直したらChromeの方はハックをいれなくてもrossi46hiro様が指示した内容でfirefoxと同じように表示されました。

現在、safariのみ600px以下にした場合、thにwidthの100%が適応されず、thとtdが縦に並んでいるものの右側が凸凹状態です。

http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome

上記のサイトを確認しながらもう少し頑張ってみます。

何かお気づきの点がありましたら、どなたでもご一報いただけると助かります。

[Dizzyboy]

rossi46hiro様、度々ご回答有難うございます！

はい、まさにhttps://jsfiddle.net/4m9pxgnd/　で上げていただいたような内容です。
行き違いになりましたがchromeに関しては自分の凡ミスでした。
以前使ったファイルをそのまま使用していたので、DOCTYPE宣言まで気づけていませんでした。
大変お手数をお掛けして申し訳ございません。

safariの方ですが上にあげて頂いたフォームだとこちらのブラウザでも問題なくthの横幅もtd同様に100%になっております。
もう一度自分の作ったフォームとつけ合わせて確認してみたいと思います。

Answer 2

CSSを削除したり戻したりして、safariでのth、tdを100%幅で表示を阻害しているのを探した結果、フォーム以外のページを囲んでいるcontainerの幅を制御するのに入れていたメディアクエリを(max-width:600px）より手前においていたからのようです。

@media screen and (max-width:800px){ 
                        #container { width: 90%; }  /*コンテナー幅*/
}

を、rossi46hiro様からご教授いただいた

@media screen and (max-width:600px){
  /*
    display:block;で無理に行を変えているのでcollapseが効かない？
    table,th要素のborder-bottomを調整
  */
  table{
    border-bottom: 1px solid #333;
  }
  
  td, th{
    width:100%;
    display: block;
    border-bottom: none;
  }
}

の、下に移動しましたらsafariでもth、tdの幅が600px以下の場合に100％で表示されました！

Macではfirefox、chrome、safariの3ブラウザで、windowsではIE11（edgeは不明）で同じ動作をすることが確認が取れました！

拙い説明にもかかわらず、的確な回答をして頂いたrossi46hiro様に感謝いたします。
本当にありがとうございました！