このHTMLテーブルが完全に応答するのを止めているのは何ですか？

スケジュール用のテーブルを作成しました。ブラウザ内でサイズを変更している間に、モバイル経由で訪問しようとすると、サイズを完全に変更できません。私は水平方向にスクロールするときには、電話で次のようになります。このHTMLテーブルが完全に応答するのを止めているのは何ですか？

を自分の携帯電話上では、木曜日の半分を遮断します。私は考えることができるすべてを試しました。私は最も経験豊富なコーダーではないので、私のコードは少しばっちりです。これがなぜ機能しないのか誰にも気付くことができますか？それとも、少し微調整するためにできることはありますか？

ご協力いただきまして誠にありがとうございます。

body { 
 
    font-family: proxima nova; 
 
} 
 

 
th, 
 
td { 
 
    text-align: center; 
 
    border-collapse: collapse; 
 
    outline: 1px solid #e3e3e3; 
 
} 
 

 
td { 
 
    padding: 1% 2%; 
 
} 
 

 
th { 
 
    background: #44A499; 
 
    color: white; 
 
    padding: 1% 2%; 
 
} 
 

 
td:hover { 
 
    cursor: pointer; 
 
    background: #44A499; 
 
    color: white; 
 
}

<table width="100%" align="center"> 
 
    <div id="head_nav"> 
 
    <tr> 
 
     <th>Time</th> 
 
     <th>Monday</th> 
 
     <th>Tuesday</th> 
 
     <th>Thrusday</th> 
 
    </tr> 
 
    </div> 
 

 
    <tr> 
 
    <th>16:15 - 17:45 </th> 
 

 
    <td> 
 
     <!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td> 
 
    <td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
 
    <td title="No Class" class="Holiday"></td> 
 

 

 
    </div> 
 
    </tr> 
 

 
    <tr> 
 
    <th>18:00 - 19:45</td> 
 

 
     <td>Dynamic Yoga at the Dragon Theater, Barmouth.</td> 
 
     <td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
 
     <td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
 

 

 
     </div> 
 
    </tr> 
 

 

 
    </div> 
 
    </tr> 
 
</table>

出典

2017-09-30 Joe

それ：ここではiPhone 5S上のSafariでテスト<div>せず、修正<th>タグが付けられたコードは、https://www.w3schools.com/howto/howto_css_table_responsive.asp

です*動作していないビューのスクリーンショットを表示すると便利ですが、いくつかの単語が長いので、同じ行にすべてを収める余地がないというのが最も良い推測です。ハイフン（ ''）を追加するか、フォントを小さくする必要があります。 – JJJ

あなたは間違ったマークアップをしていますが、 'div'sは' table'/'tr'の中にあることはできません。それを修正して、テーブルが応答します。 – felixmosh

@JJJありがとう、私はそれが携帯電話のように見えるの写真を追加しました。 – Joe

コード内のいくつかのエラーがあります。私はテーブルのdivを削除し、さらにいくつかのエラーがありました（<th>タグは</td>タグで閉じられ、いくつかの終了タグは繰り返されました）。それはすべて私に役立った。テーブルを読みやすくするために、w3schoolsの提案に沿ってコンテナ要素を追加することをお勧めします。例では<div> - overflow-x:autoです。画面が小さすぎると水平スクロールバーを表示します完全な内容

ここで "HOW TO - 応答テーブル" ページにW3Schoolsのリンクです：

<head> 
<title>Yoga Classes</title> 
<style type="text/css"> 
    body { 
     font-family: proxima nova; 
    } 
    th,td { 
     text-align: center; 
     border-collapse: collapse; 
     outline: 1px solid #e3e3e3; 
    } 
    td { 
     padding: 1% 2%; 
    } 
    th { 
     background: #44A499; 
     color: white; 
     padding: 1% 2%; 
    } 
    td:hover { 
     cursor: pointer; 
     background: #44A499; 
     color: white; 
    } 
    </style> 
</head> 
<body> 
<table width="100%" align="center" > 
    <tr> 
     <th>Time</th> 
     <th>Monday</th> 
     <th>Tuesday</th> 
     <th>Thrusday</th> 
    </tr> 
    <tr> 
     <th>16:15 - 17:45 </th> 
     <td><!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td> 
     <td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
     <td title="No Class" class="Holiday"></td> 
    </tr> 
    <tr> 
     <th>18:00 - 19:45</th> 
     <td>Dynamic Yoga at the Dragon Theater, Barmouth.</td> 
     <td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
     <td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
    </tr> 
</table> 
</body>

出典

2017-09-30 13:37:04 sachax

優秀な、W3学校の提案が働いた！どうもありがとう。 – Joe

あなたのためのマークアップを修正し、実証のための300pxするbodyを制限しました。

body { 
 
    font-family: proxima nova; 
 
    width: 300px; 
 
} 
 

 
th, 
 
td { 
 
    text-align: center; 
 
    border-collapse: collapse; 
 
    outline: 1px solid #e3e3e3; 
 
} 
 

 
td { 
 
    padding: 1% 2%; 
 
} 
 

 
th { 
 
    background: #44A499; 
 
    color: white; 
 
    padding: 1% 2%; 
 
} 
 

 
td:hover { 
 
    cursor: pointer; 
 
    background: #44A499; 
 
    color: white; 
 
}

<table width="100%" align="center"> 
 
    <thead> 
 
    <tr> 
 
     <th>Time</th> 
 
     <th>Monday</th> 
 
     <th>Tuesday</th> 
 
     <th>Thrusday</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>16:15 - 17:45 </th> 
 

 
     <td> 
 
     <!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td> 
 
     <td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
 
     <td title="No Class" class="Holiday"></td> 
 
    </tr> 
 

 
    <tr> 
 
     <th>18:00 - 19:45</th> 
 

 
     <td>Dynamic Yoga at the Dragon Theater, Barmouth.</td> 
 
     <td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
 
     <td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

出典

2017-09-30 13:25:18 felixmosh

Felixの修正をありがとう。しかし、私はまだ同じ問題を抱えています。なぜそれがスニペットで動作しているのかわかりません。これ以上の提案はありますか？ – Joe

このHTMLテーブルが完全に応答するのを止めているのは何ですか？

答えて

関連する問題