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）实现作为div将模仿具有所描述的行为的表？

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/

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

1 个答案: