在小屏幕上将 <tr> 中的 <td> 分成两行

Question

我想创建这样的布局：

桌面

移动

但不知道如何实现。到目前为止，我有这个：

<aside class="container-fluid" role="complementary">
  <div class="modal-container ">
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <h2>Name</h2>
        <ul class="menu">
          <li>Jack</li>
          <li>John</li>
          <li>James</li>
        </ul>
      </div>
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <h2>Surname</h2>
        <ul class="menu">
          <li>Sales</li>
          <li>Admin</li>
          <li>Sales</li>
        </ul>
      </div>

      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <h2>Action</h2>
        <a href="#" class="button">Connect</a>
        <a href="#" class="button">Connect</a>
        <a href="#" class="button">Connect</a>
      </div>
    </div>
    <table>
      <tr>
        <td>Jack</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td><a href="#" class="button">Connect</a></td>
      </tr>
      <tr>
        <td>John</td>
        <td>Admin</td>
      </tr>

      <tr>
        <td><a href="#" class="button">Connect</a></td>
      </tr>

      <tr>
        <td>James</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td><a href="#" class="button">Connect</a></td>
      </tr>
    </table>
  </div>
</aside>

实现这些布局最明智的方法是什么？ （应该是table和flex结合吗？用BS grid这个可以吗？）

Answer 1

您在这里对引导网格的总体理解是错误的。另外我不想为你编写整个代码 - 请理解这个概念并实现移动布局。

以下是桌面的网格校正，您必须添加更多引导类以使其更具响应性。

您不需要为此使用表格，仅使用 BS 即可完全实现这两种布局。

运行下面的 sn-p，全屏打开并调整浏览器大小 - 你会发现 BS 网格的美丽

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<aside class="container-fluid" role="complementary">
    <div class="modal-container ">
        <div class="row">

    
            <div class="col-xs-12">
              <h2 class='col-xs-4'> Name</h2>
              <h2 class='col-xs-4'> Surname</h2>
              <h2 class='col-xs-4'> Action</h2>
            </div>

            <div class="col-xs-12">
                <span class='col-xs-4'>Jack</span>
                <span class='col-xs-4'>Sales</span>
                <input type="button" value='Connect' class='col-xs-4'/>
            </div>
            
            <div class="col-xs-12">
                <span class='col-xs-4'>John</span>
                <span class='col-xs-4'>Admin</span>
                <input type="button" value='Connect' class='col-xs-4'/>
            </div>
            
            <div class="col-xs-12">
                <span class='col-xs-4'>James</span>
                <span class='col-xs-4'>Sales</span>
                <input type="button" value='Connect' class='col-xs-4'/>
            </div>
        </div>
     
      </div>

</aside>

Answer 2

概念

在小屏幕

上将<tr>变成一个flexbox

@media (max-width: 575.98px) {
  .my-table tr {
    display: flex;
    flex-wrap: wrap;
  }
  .my-table tr>td:not(:last-child) {
    flex: 1;
  }
  .my-table tr>td:last-child {
    width: 100%;
  }
}

看起来像

总共

body {
  margin: 0;
}

header {
  background: #00ADEE;
  color: white;
  height: 110px;
}

header h1 {
  padding: 0.5rem;
  margin: 0;
}

.my-table {
  width: 50%;
  margin-top: -50px;
  margin-left: auto;
  margin-right: auto;
  background: white;
  text-align: center;
  border-collapse: separate;
  border-spacing: 3rem 1.5rem;
  border: 2px solid #E7E7E7;
}

.my-table th,
.my-table td {
  padding: 0.5rem;
}

.my-table tr>td:last-child>a {
  text-decoration: none;
  display: block;
  color: black;
  padding: 0.5rem;
  background: #E7E7E7;
}

@media (max-width: 575.98px) {
  header h1 {
    text-align: center
  }
  .my-table {
    border-spacing: 1.5rem;
  }
  .my-table thead {
    display: none;
  }
  .my-table tr {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .my-table tr>td:not(:last-child) {
    flex: 1;
  }
  .my-table tr>td:last-child {
    width: 100%;
  }
}

<header>
  <h1>Table Test</h1>
</header>
<table class="my-table">
  <thead>
    <th>Name</th>
    <th>Surname</th>
    <th>Action</th>
  </thead>
  <tbody>
    <tr>
      <td>Jack</td>
      <td>Sales</td>
      <td><a href="">Connect</a></td>
    </tr>
    <tr>
      <td>John</td>
      <td>Admin</td>
      <td><a href="">Connect</a></td>
    </tr>
    <tr>
      <td>James</td>
      <td>Sales</td>
      <td><a href="">Connect</a></td>
    </tr>
  </tbody>
</table>

（根据需要更改值。）

---

使用 Bootstrap 3

带有offset 的中心表。使用与上述相同的概念。

body {
  margin: 0;
}

header {
  background: #00ADEE;
  color: white;
  height: 110px;
}

header h1 {
  padding: 0.5rem;
  margin: 0;
}

.my-table {
  margin-top: -50px !important;
  text-align: center;
  background: white;
}

.my-table * {
  border: none !important;
}

.my-table th {
  text-align: center;
}

.my-table tr>td:last-child>a {
  text-decoration: none;
  display: block;
  color: black;
  background: #E7E7E7;
}

@media (max-width: 575.98px) {
  header h1 {
    text-align: center
  }
  .my-table thead {
    display: none;
  }
  .my-table tr {
    display: flex;
    flex-wrap: wrap;
  }
  .my-table tr>td:not(:last-child) {
    flex: 1;
  }
  .my-table tr>td:last-child {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <h1>Table Test</h1>
</header>
<div class="row">
  <div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3">
    <table class="my-table table">
      <thead>
        <th>Name</th>
        <th>Surname</th>
        <th>Action</th>
      </thead>
      <tbody>
        <tr>
          <td>Jack</td>
          <td>Sales</td>
          <td><a href="">Connect</a></td>
        </tr>
        <tr>
          <td>John</td>
          <td>Admin</td>
          <td><a href="">Connect</a></td>
        </tr>
        <tr>
          <td>James</td>
          <td>Sales</td>
          <td><a href="">Connect</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>