Question

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

当屏幕很小（＆lt; 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"
  }
];

备注

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

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>

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

1 个答案: