子元素宽度为100%，缩小窗口，父元素出现横向滚动条，滚动条向右拉，父元素右边有一块空白区域，没有背景颜色...

此问题基于以下的html结构：

　　　　　　　　　　　　　　表格标题

	表头一	表头二	表头三	表头四	表头五	表头六
单元格	单元格	单元格	单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格	单元格	单元格	单元格
单元格	单元格	单元格	单元格	单元格	单元格	单元格

 

问题：

　　本人用@media设置当窗口的宽度小于480px时，表格的容器.container出现横向的滚动条。但当我们把滚动条拉到最右边的时候，表头的背景颜色的宽度和屏幕的宽度一致，此时右边会出现一块空白的区域。不管表头的容器.thead的宽度是不设置，还是设置为100%，效果都一样。因为设置.thead的宽度为100%和不设置宽度，都是其父元素.container在屏幕上可见的宽度，但并不包含要拉动滚动条才能看到的部分的宽度。

 

解决方案：

　　 当窗口的宽度小于或等于480px的时候，把.thead的宽度设置为480px。

 

解析：

　　 空白的部分，其实是由于容器.thead的宽度不够大导致的，因此我们把宽度设置得够大，就可以了。 那么，我们到底设置多大的宽度才合适呢？ 当窗口的宽度大于480px的时候，.thead的宽度是继承其父元素.container的宽度的，此时右边是不会出现空白区域，那么我们就不需要考虑这种情况。 需要考虑的则是当窗口小于或等于480px的时候，才会出现滚动条的时候，那么此时.container的最大宽度就是480px，因为我们把.thead的宽度设置为480px，就可以解决这个问题了。

转载于:https://www.cnblogs.com/andy-and-bella/p/6085852.html