Блог

У меня есть простая таблица начальной загрузки (как в приведенном ниже коде). Я хочу, чтобы в моем мобильном представлении каждая запись строки отображалась отдельно внутри поля или карточки. Например, Первая карточка —

 First: Mark
Last : Otto
Handle: @mdo
  

Вторая карточка-

 First:Jacob
Last:Thornton
Handle:@fat
  

и так далее. Возможно ли управлять этим дизайном без необходимости писать отдельный HTML для мобильного просмотра? Либо через css, либо через javascript? (Я использую bootstrap 4)

 <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
  

Вы можете просто изменить стиль каждого элемента так, как вам нравится, чтобы они выглядели. Однако вы не можете вставить информацию, если она не статична или не представлена в виде атрибута элемента, вот почему я вставил col атрибут в каждый td элемент. Например:

 document.getElementById('toggle').onclick = () => {
  const table = document.getElementById('table');
  table.classList.toggle('cards');
}  

 .cards thead {
  display: none;
}

.cards tr {
  display: flex;
  flex-direction: column;
  
  margin-bottom: 5px;
  border: 1px solid black;
}

.cards tr > th {
  display: none;
}

.cards tr > td::before {
  content: attr(col) ': ';
  font-weight: bold;
}  

 <button id="toggle">Toggle Style</button>
<table class="table" id="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td col="First">Mark</td>
      <td col="Last">Otto</td>
      <td col="Handle">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td col="First">Jacob</td>
      <td col="Last">Thornton</td>
      <td col="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td col="First">Larry</td>
      <td col="Last">the Bird</td>
      <td col="Handle">@twitter</td>
    </tr>
  </tbody>
</table>  

Вопрос: Как я могу увеличить пространство между заголовком и данными в представлении flex?
A: Путем изменения отступа с правой стороны ::before элемента.

 document.getElementById('toggle').onclick = () => {
  const table = document.getElementById('table');
  table.classList.toggle('cards');
}  

 .cards thead {
  display: none;
}

.cards tr {
  display: flex;
  flex-direction: column;
  
  margin-bottom: 5px;
  border: 1px solid black;
}

.cards tr > th {
  display: none;
}

.cards tr > td::before {
  content: attr(col) ': ';
  font-weight: bold;
  padding-right: 100px;
}  

 <button id="toggle">Toggle Style</button>
<table class="table" id="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td col="First">Mark</td>
      <td col="Last">Otto</td>
      <td col="Handle">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td col="First">Jacob</td>
      <td col="Last">Thornton</td>
      <td col="Handle">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td col="First">Larry</td>
      <td col="Last">the Bird</td>
      <td col="Handle">@twitter</td>
    </tr>
  </tbody>
</table>