使用 Bootstrap 针对不同屏幕尺寸显示不同的表格

Question

我正在使用 Bootstrap 为我的垒球联赛创建一个网站，我有一个页面按团队和部门显示所有教练，其中包含电话号码和电子邮件地址，以及可能的其他信息（例如备用联系人或助理教练）。

我想利用浏览器布局表格并保持列大小相同的能力，所以我认为此时使用<table> 会比使用<div>s 更好。

为了使表格在不同的设备上很好地显示，我想在屏幕变小时将一些信息折叠在一起。所以这就是不同大小的信息应该如何看待：

大

+------+-------+-------+-------------+-------------+
| Team | Coach | Email | Ph Number 1 | Additional  |
|      |       |       | Ph Number 2 | information |
+------+-------+-------+-------------+-------------+

中等

+------+-------+-------------+-------------+
| Team | Coach | Email       | Additional  |
|      |       | Ph Number 1 | information |
|      |       | Ph Number 2 |             |
+------+-------+-------------+-------------+

小

+-------+-------------+-------------+
| Team  | Email       | Additional  |
| Coach | Ph Number 1 | information |
|       | Ph Number 2 |             |
+-------+-------------+-------------+

超小

+-------------+
| Team        |
| Coach       |
| Email       |
| Ph Number 1 |
| Ph Number 2 |
| Additional  |
| information |
+-------------+

我目前正在这个小提琴中工作：http://jsfiddle.net/jfren484/rf5am5n8/

我不喜欢我的解决方案的一点是，我使用 visible-* 和 hidden-* 类重复表中的所有数据 4 次，以在每个屏幕尺寸显示正确的数据（并显示最大的打印媒体，即使视口实际上是“小”的）。

我的问题：有没有更好的方法让我的表格“响应”而不向浏览器发送 4 倍的数据量？我可以重新组织表格而不重复 <tr> 标记四次，但是我需要更多关于<td> 标签的类，所以我认为这不会节省任何东西。我想要的是其他方式将它折叠在一起，并且只将每条数据发送给客户端一次。

如果有一种无需任何额外库或技术的好方法可以做到这一点，那将是可取的，但我愿意探索与 Bootstrap 一起使用的其他插件以这种方式显示表格。

TLDR；有没有办法在不重复我的数据四次的情况下完成 (http://jsfiddle.net/jfren484/rf5am5n8/)？

Answer 1

这可能是解决方案：Resposnive Tables。

@media only screen and (max-width: 800px) {
  #no-more-tables table,
  #no-more-tables thead,
  #no-more-tables tbody,
  #no-more-tables th,
  #no-more-tables td,
  #no-more-tables tr {
    display: block;
  }
  #no-more-tables,
  #no-more-tables table {
    padding-left: 0;
    padding-right: 0;
  }
  #no-more-tables tr {
    border-bottom: 1px solid #eee;
  }
  #no-more-tables td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    white-space: normal;
    text-align: left;
    padding: 1px 8px;
  }
  #no-more-tables td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 100%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="no-more-tables">
  <table class="col-lg-12 table-responsive table">
    <thead>
      <tr class="info">
        <th colspan="5">Fun Division</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="/Team/Foo">Around the Block</a>

        </td>
        <td>Mick Michaelson</td>
        <td>mick.michaelfoo@<span style="display: none;">null</span>yahoo.com</td>
        <td>(999) 555-3412</td>
        <td>Assistant coach Jim Johnson - (999) 555-1111</td>
      </tr>
      <tr>
        <td><a href="/Team/Foo">Infield Flies</a>

        </td>
        <td>Mick Michaelson</td>
        <td>mick.michaelfoo@<span style="display: none;">null</span>yahoo.com</td>
        <td>(999) 555-3412</td>
        <td>Assistant coach Jim Johnson - (999) 555-1111</td>
      </tr>
      <tr>
        <td><a href="/Team/Foo">7th Inning Stretchers</a>

        </td>
        <td>Mick Michaelson</td>
        <td>mick.michaelfoo@<span style="display: none;">null</span>yahoo.com</td>
        <td>(999) 555-3412</td>
        <td>Assistant coach Jim Johnson - (999) 555-1111</td>
      </tr>
      <thead>
        <tr class="info">
          <th colspan="5">Games Division</th>
        </tr>
      </thead>
      <tr>
        <td><a href="/Team/Foo">Hit Squad</a>

        </td>
        <td>Mick Michaelson</td>
        <td>mick.michaelfoo@<span style="display: none;">null</span>yahoo.com</td>
        <td>(999) 555-3412</td>
        <td>Assistant coach Jim Johnson - (999) 555-1111</td>
      </tr>
      <tr>
        <td><a href="/Team/Foo">Big Sticks</a>

        </td>
        <td>Mick Michaelson</td>
        <td>mick.michaelfoo@<span style="display: none;">null</span>yahoo.com</td>
        <td>(999) 555-3412</td>
        <td>Assistant coach Jim Johnson - (999) 555-1111</td>
      </tr>
      <tr>
        <td><a href="/Team/Foo">New Car Smell</a>

        </td>
        <td>Mick Michaelson</td>
        <td>mick.michaelfoo@<span style="display: none;">null</span>yahoo.com</td>
        <td>(999) 555-3412</td>
        <td>Assistant coach Jim Johnson - (999) 555-1111</td>
      </tr>
    </tbody>
  </table>
</div>