如何在css中调整移动屏幕大小的表格大小？

Question

我有一张桌子，我想调整大小以适应屏幕尺寸（移动视图），边角可见边框。桌面视图中表格的图形表示为：

如上图所示属于所选部分的类是：

  

class =“section single”

属于所选部分的CSS（桌面视图）是：

.section.single {
    margin-top: 0px;
}
.section {
    box-shadow: 0 2px 3px #CCCCCC;
    -moz-box-shadow: 0 2px 3px #CCCCCC;
    -webkit-box-shadow: 0 2px 3px #CCCCCC;
    width: 100%;
    height: auto;
    padding: 10px 0px;
    display: table;
    margin-top: 20px;
}

.section {
    border-top: 0;
    border-left: 1px solid #aecaea;
    border-right: 1px solid #aecaea;
    border-bottom: 1px solid #aecaea;
    box-shadow: 0 2px 3px #CCCCCC !important;
    -moz-box-shadow: 0 2px 3px #CCCCCC !important;
    -webkit-box-shadow: 0 2px 3px #CCCCCC !important;
    background-color: #fff;
}

我用于调整上表的CSS媒体查询是：

@media screen and (max-width: 767px) and (min-width: 320px) {
  .section.single {
    margin-top: 0px;
    background-color: #EBEBEB;
  }

  .section {
    width: auto;
    height: auto;
    padding: 10px 0px;
    display: table;
    }
}

我可以使用上面的媒体查询来调整表的大小，但不幸的是，我无法在调整大小后看到表右侧的边框。