Разбейте <td>s на <tr>на два ряда на маленьких экранах - PullRequest
Новая
       16

Разбейте <td>s на <tr>на два ряда на маленьких экранах

0 голосов
/ 03 мая 2018

Я хочу создать макет следующим образом:

Desktop

desktop

Мобильный телефон

mobile

но не знаю как этого добиться. Пока у меня есть это:

In browser

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

Какой самый разумный способ достижения этих раскладок? (Должно ли это быть таблица в сочетании с flex? Можно ли использовать для этого сетку BS?)

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

Концепция

Сделать <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>
0 голосов
/ 03 мая 2018

Ваше полное понимание сетки начальной загрузки здесь неверно. Также я не хочу писать весь код для вас - пожалуйста, поймите концепцию и внедрите мобильную раскладку.

Ниже приведено исправление сетки для рабочего стола, вам нужно добавить больше классов начальной загрузки, чтобы сделать его более отзывчивым.

Для этого вам не нужны таблицы, вы можете полностью реализовать обе схемы только с помощью BS.

Запустите приведенный ниже фрагмент, откройте его в полноэкранном режиме и измените размер своего браузера - вы заметите всю прелесть сетки 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>
...