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

I would like to render a table differently according to screen size:

我想根据屏幕大小不同地呈现表格：

When the screen is small (< col-md-*), it should display the data normally on 2 columns.
当屏幕很小（

When the screen is large (col-md-* and higher), it should display the data in 4 columns.
当屏幕很大（col-md- *和更高）时，它应该以4列显示数据。

Here is a Fiddle of the following code:

这是以下代码的小提琴：

HTML

HTML

<div class="row">
  <table class="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>

Angular object to render

要渲染的角度对象

$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"
  }
];

Notes

笔记

I would like to avoid duplicating code to do this.

我想避免重复代码来执行此操作。
I've tried several things, and the easiest way I found is to cut the data in 2 parts, and make a table for each. I don't like to do that, it is too complex, but here is a Fiddle for this solution.

我尝试了几件事，我找到的最简单的方法是将数据分成2部分，并为每个部分制作一个表格。我不喜欢这样做，它太复杂了，但这里是这个解决方案的小提琴。
I don't need th (Firstname, Lastname), remove them if it's easier.
我不需要th（名字，姓氏），如果它更容易删除它们。

1 个解决方案

#1

Try this.

尝试这个。

I hope this will helps you.

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

.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 class="container">
	<div class="row">
		<div class="col-sm-6">
			<table class="table table-striped">
        <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 class="col-sm-6">
      <table class="table table-striped on-small">
        <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>

#1