3.4.7　响应式表格

3.4.7　响应式表格

随着响应式设计的大量需求，Bootstrap为表格也提供了一个响应式设计的容器（.table-responsive样式），将.table-responsive样式包装在.table样式外部即可创建响应式表格，其会在小屏幕设备上（小于768像素）水平滚动。而当屏幕大于768像素宽度时，水平滚动条消失。示例如下：

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

运行效果如图3-17所示。

响应式表格的实现原理是利用了CSS的媒体查询特性，在小于768像素的设备上应用@media(max-width: 767px)里的样式。该样式主要有3个方面的设置：

❑对.table-responsive容器边框以及滚动条进行了设置。

❑把原有.table样式的底部外边距margin-bottom从20像素改为了0像素，其目的是消除滚动条带来的上下高度差，并在.table-responsive样式上又设置了一个margin-bottom: 15px，以避免和容器外部的下一个元素重叠。

3.4.7　响应式表格 - 图1 图3-17　响应式表格的运行效果

❑将所有单元格的文本设置成不自动换行，以保留原有样式。

实现响应式的详细源码如下：

// 源码1583行
@media (max-width: 767px) {
  .table-responsive { 
    width: 100%;
    margin-bottom: 15px;                /* 设置底部外边距，避免重叠 */
    overflow-x: scroll;         /* 超出范围，水平可滚动 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;     /* 设置1像素宽的边框 */
  }
  .table-responsive > .table {    margin-bottom: 0;  }
  .table-responsive > .table > thead > tr > th,
  /* 省略部分样式 */
  .table-responsive > .table > tfoot > tr > td {
white-space: nowrap;            /* 确保单元格中的文本不会换行，直到遇到 <br> 标签为止*/
  }
  .table-responsive > .table-bordered {    border: 0;  }

通过上述代码，可以看到.table-responsive给自己加了一个1px的外边框。如果在.table上再使用.table-bordered样式的话，就会和表格的外边框重合了，变粗了，可能会想象成如图3-18所示的效果。

3.4.7　响应式表格 - 图2 图3-18　响应式样式和table-bordered样式叠加的运行效果

聪明的Bootstrap开发团队怎么会犯这样低级的错误呢？所以他们在该响应式样式的内部，针对.table-bordered样式又进行了去边框设置。源码如下：

// 源码1604行
  .table-responsive > .table-bordered {
    border: 0; /*将整个表格的外边框设置为0像素*/
  }
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  /*此处省略一些选择符*/
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0; /*将所有tr的第一个单元格(即最左边的一列)的左边框都置为0像素*/
  }
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  /*此处省略一些选择符*/
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0; /*将所有tr的最后一个单元格(即最右边的一列)的右边框都设置为0像素*/
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  /*此处省略一些选择符*/
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0; /*将最后一行tr里的单元格的底部边框设置为0像素*/
  }

运行效果如图3-19所示。

3.4.7　响应式表格 - 图3 图3-19　去边框处理后的运行效果

3.4.7 响应式表格