tal*_*ons 3 html css html-table responsive
我正在尝试将响应式表格添加到我网站的 iframe 中。该表在桌面上看起来不错，但在移动视图中则不然。我尝试过 @media 使表格按行折叠，以便每行的第一个单元格将在一列中垂直对齐。
\n\n|-------------------------------------------------|\n| row head1 | data1 | data2 |\n|-------------------------------------------------| <--my table \n| row head2 | data3 | data4 |\n\n\n|--------------------|\n| row head1 | <- i want to have this in mobile view\n|--------------------|\n| data1 |\n|--------------------|\n| data2 |\n|--------------------|\n| row head2 |\n|--------------------|\n| data3 |\n|--------------------|\n| data4 |\n|--------------------|\n下面我做错了什么吗？
\n\n|-------------------------------------------------|\n| row head1 | data1 | data2 |\n|-------------------------------------------------| <--my table \n| row head2 | data3 | data4 |\n\n\n|--------------------|\n| row head1 | <- i want to have this in mobile view\n|--------------------|\n| data1 |\n|--------------------|\n| data2 |\n|--------------------|\n| row head2 |\n|--------------------|\n| data3 |\n|--------------------|\n| data4 |\n|--------------------|\n<style type="text/css">\r\n.tg {border-collapse:collapse;border-spacing:0;border-color:#ffffff;}\r\n.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}\r\n.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}\r\n.tg .tg-iwtr{background-color:#34cdf9;color:#ffffff;vertical-align:top;}\r\n.tg .tg-yzt1{background-color:#efefef;vertical-align:top}\r\n.tg .tg-cxkv{background-color:#ffffff}\r\n.tg .tg-bsv2{background-color:#efefef}\r\n.tg .tg-3we0{background-color:#ffffff;vertical-align:top}\r\n.tg .tg-yw4l{vertical-align:top}\r\n@media all and (max-width: 479px) {\r\n table,\r\n thead,\r\n tbody,\r\n th,\r\n td,\r\n tr {\r\n display: block\t;\r\n\r\n\t\r\n\t\r\n }\r\n</style>CSS 对我来说看起来不错。请注意，在 HTML 中，您正在打开一个<td>但关闭了一个</th>.
<style type="text/css">\r\n.tg {border-collapse:collapse;border-spacing:0;border-color:#ffffff;}\r\n.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}\r\n.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ffffff;}\r\n.tg .tg-iwtr{background-color:#34cdf9;color:#ffffff;vertical-align:top;}\r\n.tg .tg-yzt1{background-color:#efefef;vertical-align:top}\r\n.tg .tg-cxkv{background-color:#ffffff}\r\n.tg .tg-bsv2{background-color:#efefef}\r\n.tg .tg-3we0{background-color:#ffffff;vertical-align:top}\r\n.tg .tg-yw4l{vertical-align:top}\r\n@media all and (max-width: 479px) {\r\n table,\r\n thead,\r\n tbody,\r\n th,\r\n td,\r\n tr {\r\n display: block\t;\r\n\r\n\t\r\n\t\r\n }\r\n</style><div class="tg-wrap"><table class="tg" style="width: 100%;" >\r\n<colgroup>\r\n<col style="width: 110px">\r\n<col style="width: 108px">\r\n<col style="width: 418px">\r\n<col style="width: 578px">\r\n</colgroup>\r\n <tr>\r\n <th class="tg-iwtr" rowspan="2">04/08/2017</th>\r\n <th class="tg-bsv2">11:00 \xe2\x80\x93 12:30</th>\r\n <th class="tg-bsv2">data</th>\r\n <th class="tg-yzt1">data</th>\r\n </tr>\r\n <tr>\r\n <td class="tg-cxkv">15:00 \xe2\x80\x93 17:00</td>\r\n <td class="tg-cxkv">data</td>\r\n <td class="tg-3we0">data</td>\r\n </tr>\r\n <tr>\r\n <td class="tg-iwtr">05/08/2017</td>\r\n <td class="tg-yzt1">11:00 \xe2\x80\x93 12:30</td>\r\n <td class="tg-yzt1">data</td>\r\n <td class="tg-yzt1">data</td>\r\n </tr>\r\n <tr>\r\n <td class="tg-iwtr" rowspan="2">06/08/2017</td>\r\n <td class="tg-3we0">15:00 \xe2\x80\x93 16:30</td>\r\n <td class="tg-3we0">data</td>\r\n <td class="tg-3we0">data</td>\r\n </tr>\r\n <tr>\r\n <td class="tg-yzt1">16:30 \xe2\x80\x93 18:00</td>\r\n <td class="tg-yzt1">data</td>\r\n <td class="tg-yzt1">data</td>\r\n </tr>\r\n <tr>\r\n <td class="tg-iwtr" rowspan="2">07/08/2017</td>\r\n <td class="tg-3we0">15:00 \xe2\x80\x93 16:30</td>\r\n <td class="tg-3we0">data</td>\r\n <td class="tg-3we0">data</td>\r\n </tr>\r\n <tr>\r\n <td class="tg-yzt1">16:30 \xe2\x80\x93 18:00</td>\r\n <td class="tg-yzt1">data</td>\r\n <td class="tg-yzt1">data</td>\r\n </tr>\r\n</table></div>