具有重复列组的响应表答案

【问题标题】：Responsive table with repeating column groups具有重复列组的响应表
【发布时间】：2015-06-30 07:41:29
【问题描述】：

我有一个简单的 3 列表（下面的第二个代码示例）。大多数时候它会显示在宽屏高清电视上，所以我希望结构类似于下面的第一个代码示例，但取决于屏幕的宽度，如果它是在较小的屏幕上观看而不是4 个重复的列组，将其更改为 3，然后是 2，然后是 1 用于电话。如何使用 CSS/媒体查询来做到这一点？

<table>
  <tr>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
    <th>Time</th>
    <th>Hole</th>
    <th>Player</th>
  </tr>
  <tr>
    <td>12:06 PM</td>
    <td>2</td>
    <td>Ackerman</td>
    <td>11:53 AM</td>
    <td>3</td>
    <td>Alexander</td>
    <td>12:04 PM</td>
    <td>3</td>
    <td>Allan</td>
    <td>02:00 PM</td>
    <td>2</td>
    <td>Allen</td>
  </tr>
</table>

<table>
        <tr>
          <th>Time</th>
          <th>Hole</th>
          <th>Player</th>
        </tr>
        
          <tr>
            <td>12:06 PM</td>
            <td>2</td>
            <td>Ackerman</td>
          </tr>
        
          <tr>
            <td>11:53 AM</td>
            <td>3</td>
            <td>Alexander</td>
          </tr>
        
          <tr>
            <td>12:04 PM</td>
            <td>3</td>
            <td>Allan</td>
          </tr>
        
          <tr>
            <td>02:00 PM</td>
            <td>2</td>
            <td>Allen</td>
          </tr>
        
          <tr>
            <td>12:03 PM</td>
            <td>1</td>
            <td>Anderson</td>
          </tr>
        
          <tr>
            <td>02:49 PM</td>
            <td>3</td>
            <td>Apple</td>
          </tr>
        
          <tr>
            <td>02:53 PM</td>
            <td>1</td>
            <td>Campbell</td>
          </tr>
        
          <tr>
            <td>02:15 PM</td>
            <td>4</td>
            <td>Deane</td>
          </tr>
        
          <tr>
            <td>04:00 PM</td>
            <td>1</td>
            <td>Decker</td>
          </tr>
        
          <tr>
            <td>10:31 AM</td>
            <td>5</td>
            <td>Esposito</td>
          </tr>
        
          <tr>
            <td>02:41 PM</td>
            <td>4</td>
            <td>Estes</td>
          </tr>
        
          <tr>
            <td>01:29 PM</td>
            <td>2</td>
            <td>Faidley</td>
          </tr>
        
          <tr>
            <td>10:31 AM</td>
            <td>5</td>
            <td>Fisher</td>
          </tr>
        
          <tr>
            <td>02:16 PM</td>
            <td>4</td>
            <td>Gaus</td>
          </tr>
        
          <tr>
            <td>02:15 PM</td>
            <td>3</td>
            <td>Giancola</td>
          </tr>
        
          <tr>
            <td>10:31 AM</td>
            <td>5</td>
            <td>Gibbons</td>
          </tr>
        
          <tr>
            <td>02:13 PM</td>
            <td>3</td>
            <td>Hansen</td>
          </tr>
        
          <tr>
            <td>02:51 PM</td>
            <td>2</td>
            <td>Healy</td>
          </tr>
        
          <tr>
            <td>02:42 PM</td>
            <td>4</td>
            <td>Kain</td>
          </tr>
        
          <tr>
            <td>04:01 PM</td>
            <td>2</td>
            <td>Kestner</td>
          </tr>
        
          <tr>
            <td>02:12 PM</td>
            <td>3</td>
            <td>King</td>
          </tr>
        
          <tr>
            <td>11:03 AM</td>
            <td>2</td>
            <td>Krieger</td>
          </tr>
        
          <tr>
            <td>02:51 PM</td>
            <td>3</td>
            <td>Lee</td>
          </tr>
        
      </table>

【问题讨论】：

为什么不使用像 Bootstrap 这样的响应式框架？
这将如何帮助我创建重复的表格列组？我看不出引导程序如何帮助解决这种特定情况。这不仅仅是一个有很多列的表格，它是一个有 3 列的表格，如果空间允许，我想在更宽的屏幕上水平重复。想象一下按字母顺序排列的机场到达电视屏幕......
@pixelwiz 我的回答解决了你的问题还是你有更多的问题
我仍然没有看到一种方法可以在宽屏幕上水平放置 4 个表格，并根据屏幕尺寸将其减少到 3、2、1，但只显示标题必要时每个表的，即使我将它们转换为 div 或 UL。
@pixelwiz 更新答案请见下文

标签： css responsive-design responsiveness

【解决方案1】：

好的，所以我已将我的答案更新为与您的评论完全一样，有 3 个表格相邻，有 2 行信息作为示例...这里是代码，这里是示例站点 http://codepen.io/anon/pen/eNYvoq

    <div class="container-full">
  <div class="row">
    <div class="col-md-2">
      <ul>Time</ul>
      <ul>12:06 PM</ul>
      <ul>11:53 AM</ul>
    </div>
    <div class="col-md-1">
      <ul>Hole</ul>
      <ul>2</ul>
      <ul>3</ul>
    </div>
    <div class="col-md-1">
      <ul>Player</ul>
      <ul>Ackerman</ul>
      <ul>Alexander</ul>
    </div>
    <div class="col-md-2">
      <ul>Time</ul>
      <ul>12:06 PM</ul>
      <ul>11:53 AM</ul>
    </div>
    <div class="col-md-1">
      <ul>Hole</ul>
      <ul>2</ul>
      <ul>3</ul>
    </div>
    <div class="col-md-1">
      <ul>Player</ul>
      <ul>Ackerman</ul>
      <ul>Alexander</ul>
    </div>
    <div class="col-md-2">
      <ul>Time</ul>
      <ul>12:06 PM</ul>
      <ul>11:53 AM</ul>
    </div>
    <div class="col-md-1">
      <ul>Hole</ul>
      <ul>2</ul>
      <ul>3</ul>
    </div>
    <div class="col-md-1">
      <ul>Player</ul>
      <ul>Ackerman</ul>
      <ul>Alexander</ul>
    </div>
  </div>

</div>

如果这不能回答您的问题，请评论与您的要求不符的内容。

【讨论】：