Question

I am not sure how to make my table responsive for mobile devices.

This is the code:

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>

I need help using @media queries to either flip the table to read vertically or have a scrollbar at the bottom, so you can see the rest of the table.

Answer 1

你可以使用Only CSS获取响应表，当你需要浏览器屏幕然后你分开一行。我希望当你看到这段代码看到这个链接jsfiddle.net时，你会明白如何使用CSS作为响应表。

@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 &amp; 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. &amp; Card Download"; }
.ncprg_table th,
.ncprg_table td {
    font-size: 13px;
}
}

Responsive web design for tables?

1 个答案: