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

Question

我想根据屏幕大小以不同的方式呈现表格：

• 当屏幕较小时（col-md-*），应该在2列上正常显示数据。

---

• 当屏幕较大（col-md-* 及以上）时，应以4 列 显示数据。

---

下面是Fiddle的代码：

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>

要渲染的角度对象

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

---

备注

1. 我想避免重复代码来做到这一点。

2. 我已经尝试了几件事，我发现最简单的方法是将数据分成两部分，并为每个部分制作一个表格。我不喜欢那样做，太复杂了，不过这里是Fiddle for this solution。

3. 我不需要th（Firstname、Lastname），如果更简单，请删除它们。

Answer 1

试试这个。

希望对你有帮助。

.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>