メディアクエリを使用してテーブル要素を完全に再配置する

Question

ブラウザのサイズが大きくなると、画面の幅が一定のポイントに達した後に（CSSメディアクエリを使用して）比較的大きなテーブルを再配置しようとしています私はすでに不要な行を削除し、その基本的なレイアウトを得ることで成功してきました

：窓を介してすべての道を踏み付けています。

問題がある：
各曜日の下にインラインブロック要素は、テーブルの幅に合わせて必要があり、何も（多分私はそれを正しく使用していない）、これまで働いたフレックスれていませんオーバーフローまたはボーダーボックスのいずれかを選択します。

HTML（単にテーブル）

<table> 
     <thead> 
      <tr> 
       <th>DAY</th> 
       <th style="width:300px;">CLASS</th> 
       <th>TIME</th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Monday</td> 
       <td>Endurance biking</td> 
       <td>9am-1pm</td> 
       <td><a href="#bannerMain">Register</a></td> 
      </tr> 
      <tr> 
       <td>Tuesday</td> 
       <td>Speed biking</td> 
       <td>2pm-4pm</td> 
       <td><a href="#bannerMain">Register</a></td> 
      </tr> 
      <tr class="toBeDeleted"> 
       <td>Wednesday</td> 
       <td colspan="3" class="noClasses">No classes</td> 
      </tr> 
      <tr> 
       <td>Thursday</td> 
       <td>Speed biking</td> 
       <td>3pm-5pm</td> 
       <td><a href="#bannerMain">Register</a></td> 
      </tr> 
      <tr class="toBeDeleted"> 
       <td>Friday</td> 
       <td colspan="3" class="noClasses">No classes</td> 
      </tr> 
      <tr> 
       <td>Saturday</td> 
       <td>Endurance biking</td> 
       <td>9am-1pm</td> 
       <td><a href="#bannerMain">Register</a></td> 
      </tr> 
      <tr> 
       <td>Sunday</td> 
       <td>Endurance biking</td> 
       <td>10am-4pm</td> 
       <td><a href="#bannerMain">Register</a></td> 
      </tr> 
     </tbody> 
    </table> 

CSS（2行「THEAD」、色各行のすべての最初のセルを削除し、それのそれぞれの行の残りの部分の上に、そのセルを配置します）

@media only screen and (max-width: 530px){ 
thead, .pasDeClasses{ 
    display: none; 
} 
td:first-child{ 
    background-color: #4080bc; 
    color: white; 
    font-family: Arial; 
    display: block; 
} 
tr > td{ 
    border-left: 1px solid white; 
    max-width: 100%; 
    display: inline-block; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
table{ 
    min-width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    font-family: Arial; 
}  
}  
thead{  
    background-color: #4080bc; 
    color: white; 
}  

td{ 
background-color: #d6d6d6; 
padding-top: 10px; padding-bottom: 10px; padding-left: 30px; padding-right: 
30px; 
text-align: center; 
} 

Answer 1

あなたは両親の下部に絶対位置決めのみ最後tr要素を試みることができます。 position:relativeに気づき、そして親にdisplay:blocktr

tr{ 
    display:block;position:relative;padding-bottom:20px 
} 
tr td:last-child{ 
    position:absolute;bottom:0; 
    width:100%;height:20px 
} 

これは比較的位置付け要素の内側に絶対位置の要素ではなく、ビューポートよりも、比較的位置付け親要素に「ドッキング」するルールを使用して動作します。