我有一个简单的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>
&#13;
<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>
&#13;
答案 0 :(得分:3)
好的,所以我更新了我的答案,就像你的评论一样,旁边有3个表,旁边有2行信息示例...这里是代码,这里是示例网站http://codepen.io/anon/pen/eNYvoq < / p>
<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>
如果这不能回答您的问题,请评论哪些内容与您的要求不匹配。