包含重复列组的响应表 [英] Responsive table with repeating column groups
本文介绍了包含重复列组的响应表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的3列表（下面的第二个代码示例）。大多数时候，它将显示在宽屏高清电视上，所以我想结构就像下面的第一个代码示例，但取决于屏幕的宽度，如果它是在较小的屏幕上，而不是4重复列组，将其更改为3，然后2，然后为手机1。如何使用CSS / Media查询？
< table& < tr> < th> Time< / th> < th>孔< / th> < th> Player< / th> < th> Time< / th> < th>孔< / th> < th> Player< / th> < th> Time< / th> < th>孔< / th> < th> Player< / th> < th> Time< / th> < th>孔< / 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>孔< / 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> Deker< / 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>
解决方案
Ok，所以我更新了我的答案是真的像你的评论有3个表旁边的eachother 2行信息为例子...这里是代码，这里是示例网站 http://codepen.io/anon/pen/eNYvoq
< div class =container-full>
< div class =row>
< div class =col-md-2>
< ul>时间< / 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>时间< / 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>时间< / 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>
如果这不回答你的问题，然后评论什么不符合你的要求。 >
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>
解决方案
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.
这篇关于包含重复列组的响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
