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

Question

我正在使用Bootstrap在我的垒球联盟的网站上工作，我有一个页面，显示团队和部门的所有教练，电话号码和电子邮件地址，以及可能的其他信息（例如，替代联系人或助理）教练）。

我想利用浏览器＆＃39;能够布置表并使列保持相同的大小，因此我认为使用<table>会比使用<div>更好。

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

大

+------+-------+-------+-------------+-------------+
| 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 |             |
+-------+-------------+-------------+

Xtra Small

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

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

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

我的问题：是否有更好的方法来制作我的桌子＆＃34;响应＆＃34;没有将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>