Responsive table with repeating column groups

Question

I have a simple 3 column table (second code sample below). Most of the time it would be displayed on a wide-screen HD TV, so I would like the structure to be like the first code sample below, and yet depending on the width of the screen, if it's viewed on smaller screens instead of having 4 repeating columns groups, change it to 3, then 2 then 1 for phones. How can I do this with CSS/Media queries?

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

Erector

why not use a responsive framework like Bootstrap? – Captive

How exactly would that help me with creating repeating groups of table columns? I don't see how bootstrap can help with this specific scenario. It's not just a table with many columns, it's a table with 3 columns, that I would like to repeat horizontally on wider screens as space permits. Imagine an airport arrival TV screens alphabetically... – Erector

@Erector did my answer solve your problem or do you have more questions – Atul

I still don't see a way to have basically like 4 tables next to each other horizontally on wide screens, and reduce it to 3, 2,1 depending on screen size, but only show the headings of each table when necessary, even if I convert them to divs or UL. – Erector

@Erector updated answer pls see below – Atul

Ok, I'll accept the answer. It's not exactly what I had in mind, looks like doing display:flex and putting a table inside a div might work better for me. I don't think it's possible to do exactly what I invision. – Erector

Answer 1

Ok so I have updated my answer to be EXACTLY like your comment there are 3 tables next to eachother with 2 rows of information for an example...here is the code and here is the example site 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>

If this doesnt answer your question then comment as to what is not matching what your asking.

Atul