如何將合併單元格的表格轉換爲響應式設計？

Question

我需要在桌面上的桌面屏幕上顯示數據，如this fiddle所示。

CSS：

<style type="text/css"> 
.tg {border-collapse:collapse;border-spacing:0;} 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.tg .tg-yw4l{vertical-align:top} 
.tg .tg-yw4l.tg-left{width:22%} 
.tg .tg-yw4l.tg-center{width:35%} 
.tg .tg-yw4l.tg-right{width:35%} 
.tg .tg-yw4l.tg-exleft{width:30%} 
.tg .tg-yw4l.tg-excenter{width:50%} 
.tg .tg-yw4l.tg-exright{width:20%} 
</style> 

HTML：

<table class="tg"> 
    <tr> 
    <td class="tg-yw4l tg-left" rowspan="2"><img src="http://dev.guitar-dreams.com/images/TAB.gif"</td> 
    <td class="tg-yw4l tg-center">Title of Guitar Lesson</td> 
    <td class="tg-yw4l tg-right">Category</td> 
    </tr> 
    <tr> 
    <td class="tg-yw4l" colspan="2">Here is the description. If there is a lot of text here, then this cell's bottom edge should simply drop down, and the cell wit the image should corre ponsingly have its bottom edge drop down.</td> 
    </tr> 
    <tr> 
    <td colspan="3"> 
     <table class="tg" width=100%> 
      <tr> 
       <td class="tg-yw4l" colspan="3">Exercises in this lesson</td> 
      </tr> 
      <tr> 
       <td class="tg-yw4l tg-exleft">Exercise Title</td> 
       <td class="tg-yw4l tg-excenter">Here is an exercise description. If the text is long, this cell's bottom edge should expand downward, along with other cells in this row.</td> 
       <td class="tg-yw4l tg-exright">Media: Audio, Video</td> 
      </tr> 

     </table>    
    </td> 
    </tr> 
</table> 

當在移動設備上觀看，我想對所有細胞中垂直堆疊的，所以你必須

Lesson Image 
Lesson Title 
Lesson Category 
Lesson Description 
Exercises in Lesson 
Exercise Title 
Exercise Description 
Exercise Media 

任何想法我將如何1）實現這個作爲一個表，將有我所描述的行爲或2）實現divs會模仿一個表中描述的行爲？

Answer 1

向您的樣式添加媒體查詢，以便在較小的屏幕尺寸下將表格單元格顯示爲塊元素。

@media (max-width:480px) { 
    table.tg tr td { 
     display:block; 
     width:auto !important; 
     padding:0 0 5px; 
     border:0; 
    } 
} 

https://jsfiddle.net/80xy7rLo/