如何将包含合并单元格的表格转换为响应式设计？答案

【问题标题】：How to convert table with merged cells to responsive design?如何将包含合并单元格的表格转换为响应式设计？
【发布时间】：2015-10-06 23:53:12
【问题描述】：

我需要在桌面屏幕上以表格形式显示数据，如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) 实现为 div 来模拟具有所描述行为的表吗？

【问题讨论】：

标签： html css html-table fluid-layout

【解决方案1】：

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

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

https://jsfiddle.net/80xy7rLo/

【讨论】：

哇——我从没想过会这么简单！谢谢！