テーブルのレスポンシブルウェブデザインは？

Question

私のテーブルをモバイルデバイスに対応させる方法がわかりません。

これはコードです：

table { 
 
    overflow-x: auto; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    font-family: 'Manuale', serif; 
 
} 
 

 
th, 
 
td { 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #f2f2f2; 
 
} 
 

 
th { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
}

<table> 
 
    <tr> 
 
    <th>Time</th> 
 
    <th>When</th> 
 
    <th>Elevation Gain</th> 
 
    <th>Type</th> 
 
    <th>Level</th> 
 
    </tr> 
 
    <tr> 
 
    <td>10-14 hours</td> 
 
    <td>June through October</td> 
 
    <td>1,600 m</td> 
 
    <td>Out and Back</td> 
 
    <td>Not family friendly and moderately trafficed</td> 
 
    </tr> 
 
</table>

私はどちらかに@mediaクエリを使用して助ける垂直読み取りまたは下部にスクロールバーを持っているテーブルを反転するので、あなたは残りの部分を見ることができる必要がありますテーブルの

Answer 1

ブラウザで必要なときに応答するテーブルを取得することができます。私はあなたがこのコードを見たら、このリンクjsfiddle.netを見て、あなたがCSS for Responsiveテーブルの使い方を明確にしていることを願っています。

@media screen and (max-width: 700px) { 
.width_one, .width_two, .width_three, .width_four { width:inherit;} 
.ncprg_table tr.bg_title { display: none; } 
.ncprg_table, 
.ncprg_table thead, 
.ncprg_table tbody, 
.ncprgtable th, 
.ncprg_table td, 
.ncprg_table tr { 
    display: block; 
} 
.ncprg_table { padding: 0; } 
.ncprg_table thead tr { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
.ncprg_table tr { 
    padding:0px; 

} 
.ncprg_table td { 
    border: none; 
    border-bottom: 1px solid #747474; 
    position: relative; 
    padding-left: 140px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
    padding-top:19px; 
} 
.ncprg_table td { 
    height:38px; 
} 
.ncprg_table td:before { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    width:140px; 
    padding:0 10px 0 15px; 
    white-space: nowrap; 
    font-size:13px; 
    color:#747474; 
    text-align:left; 
} 
.ncprg_table td:nth-of-type(1):before { content: "Standard - CPR/AED"; } 
.ncprg_table td:nth-of-type(2):before { content: "Modules"; } 
.ncprg_table td:nth-of-type(3):before { content: "Training"; } 
.ncprg_table td:nth-of-type(4):before { content: "Validity"; } 
.ncprg_table td:nth-of-type(5):before { content: "Certification"; } 
.ncprg_table td:nth-of-type(6):before { content: "Duration"; } 
.ncprg_table td:nth-of-type(7):before { content: "AHA & ECC"; } 
.ncprg_table td:nth-of-type(8):before { content: "Exam Attempts"; } 
.ncprg_table td:nth-of-type(9):before { content: "Vinyl Wallet Card"; } 
.ncprg_table td:nth-of-type(10):before { content: "Cert. & Card Download"; } 
.ncprg_table th, 
.ncprg_table td { 
    font-size: 13px; 
} 
}