响应式表格

cover-image 博客用的是ghostwill主题。使用的时候发现默认的table样式不是很让人满意。于是参考了bootstrap，对本博客添加了表格样式。

.single-post-inner th, td {
    border: 1px solid #ddd;
    white-space: nowrap;
  }
  @media screen and (max-width:768px) {
    .single-post-inner .table-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-x: scroll;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      -webkit-overflow-scrolling: touch;
    }
  }

使用时需要将table包裹在.table-responsive元素内

<div class="table-responsive">
	<table>
    ...
    </table>
</div>

PS: 设置table { display: block; }不需要额外元素包裹就可实现相应式效果（不支持IE9及以下浏览器），具体原理我也不是很清楚。

.single-post-inner th, td {
    border: 1px solid #ddd;
    white-space: nowrap;
    /* IE hack */
    white-space: normal\9;
  }
  @media screen and (max-width:768px) {
    .single-post-inner > table {
      display: block;
      width: 100%;
      margin-bottom: 15px;
      overflow-x: scroll;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      -webkit-overflow-scrolling: touch;
    }
  }

<table>
...
</table>