1

シンプルな 3 列のテーブルがあります (下の 2 番目のコード サンプル)。ほとんどの場合、ワイドスクリーンの HD TV に表示されるため、下の最初のコード サンプルのような構造にしたいと思いますが、画面の幅によっては、小さい画面で表示するのではなく、 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>

4

1 に答える 1

3

わかりましたので、あなたのコメントとまったく同じように回答を更新しました。例として、2行の情報を含む3つのテーブルが隣り合っています...ここにコードがあり、ここにサンプルサイトがあります http://codepen.io/anon /ペン/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>

これがあなたの質問に答えない場合は、あなたの質問と一致しないものについてコメントしてください。

于 2015-04-22T15:10:09.003 に答える