html – 如何根据屏幕大小将表行更改为列？

概述我想根据屏幕大小不同地呈现表格： >当屏幕很小(< col-md- *)时,它应该在2列上正常显示数据. >当屏幕很大(col-md- *和更高)时,它应该以4列显示数据. 这是以下代码的Fiddle： HTML <div class="row"> <table class="table"> <thead> <tr> <th>Firstname</th> 我想根据屏幕大小不同地呈现表格：

>当屏幕很小(< col-md- *)时,它应该在2列上正常显示数据.

>当屏幕很大(col-md- *和更高)时,它应该以4列显示数据.

这是以下代码的Fiddle：

HTML

<div >  <table >    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>      </tr>    </thead>    <tbody>      <tr ng-repeat="i in items">        <td>{{i.firstname}}</td>        <td>{{i.lastname}}</td>      </tr>    </tbody>  </table></div>

要渲染的角度对象

$scope.items = [{    "firstname": "John","lastname": "Rambo"  },{    "firstname": "Conor","lastname": "Mccloud"  },{    "firstname": "Bruce","lastname": "Wayne"  },{    "firstname": "Peter","lastname": "Parker"  },{    "firstname": "Forrest","lastname": "Gump"  },{    "firstname": "PatIEnce","lastname": "Philipps"  },{    "firstname": "Steve","lastname": "Jobs"  },{    "firstname": "Harry","lastname": "Potter"  }];

笔记

>我想避免重复代码来执行此 *** 作.
>我尝试了几件事,我发现最简单的方法是将数据分成两部分,并为每个部分制作一个表.我不喜欢这样做,它太复杂了,但这里是Fiddle for this solution.
>我不需要th(名字,姓氏),如果它更容易删除它们.

解决方法 试试这个.

我希望这会对你有所帮助.

.table{  margin-bottom: 0px!important;}@media (max-wIDth: 767px){  .table tr th,.table tr td{    wIDth: 50%;  }  .on-small thead{    display: none;  }}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS"><div >	<div >		<div >			<table >        <thead>          <tr>            <th>First name</th>            <th>Last name</th>          </tr>        </thead>         <tbody>          <tr>            <td>John</td>            <td>Rambo</td>          </tr>          <tr>            <td>Conor</td>            <td>Mccloud</td>          </tr>          <tr>            <td>Bruce</td>            <td>Wayne</td>          </tr>          <tr>            <td>Forrest</td>            <td>Gump</td>          </tr>        </tbody>        </table>		</div>    <div >      <table >        <thead>          <tr>            <th>First name</th>            <th>Last name</th>          </tr>        </thead>         <tbody>          <tr>            <td>PatIEnce</td>            <td>Philipps</td>          </tr>          <tr>            <td>Steve</td>            <td>Jobs</td>          </tr>          <tr>            <td>Peter</td>            <td>Parker</td>          </tr>          <tr>            <td>Harry</td>            <td>Potter</td>          </tr>        </tbody>        </table>    </div>	</div></div>

总结

以上是内存溢出为你收集整理的html – 如何根据屏幕大小将表行更改为列？全部内容，希望文章能够帮你解决html – 如何根据屏幕大小将表行更改为列？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。