如何将合并单元格的 table 转换为响应式设计？

Question

我需要在 table 的桌面屏幕上显示数据，如 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) 将其实现为具有我描述的行为的 table 或 2) 实现为模仿具有所描述行为的 table 的 div 吗？

Answer 1

向您的样式添加媒体查询以在较小的屏幕尺寸下将 table 单元格显示为块元素。

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

https://jsfiddle.net/80xy7rLo/

如何将合并单元格的 table 转换为响应式设计？

How to convert table with merged cells to responsive design?

html

css

html-table

fluid-layout