Добавить CSS для форматирования таблицы в сетке

Question

Итак, в моем php-файле группы перечислены сверху вниз.Я хочу перечислить их слева направо, а затем начать новую строку, чтобы они все были в формате сетки, хорошо отображаемой на странице.Как я могу добавить HTML / CSS, чтобы сделать это?

Object.keys(cats).forEach(function(Group) {
      let html = '';

      // Append the 'category' header

      html = '<tr>';
      html += '<td><h1>'+"Group"+ Group+'</h1></td>';
      html += '</tr>';
      $('table').append(html);


      // Loop through the results for this 'category'
      cats[Group].forEach(function(element) {

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html = '<tr>';
        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';
        html += '</tr>';
        $('table').append(html);

      });

    });

    });

    </script>

    </body>

    <table> </table>

Answer 1

Как я и предлагал в моих комментариях, вы можете создать таблицу для каждой группы (в вашем цикле for) и добавить их в div с id = 'tables_container'.

Затем в CSS установите ширину таблиц равной 33% и поместите их влево следующим образом:

CSS

table{
  width: 33%;
  float: left;
}

JavaScript / JQuery

Object.keys(cats).forEach(function(Group) {
      let html = '';

      //add the table opening tag to the html variable
      html += '<table>';
      //Append the 'category' header
      html += '<tr>';
      html += '<td><h1>'+"Group"+ Group+'</h1></td>';
      html += '</tr>';

      // Loop through the results for this 'category'
      cats[Group].forEach(function(element) {   
        var names = element.names;
        var img = "<img src=' " + randomImage+ " ' />";
        html += '<tr>';
        html += '<td><p>' + names + '</p></td> ';
        html += '<td><p>' + img + '</p></td>';
        html += '</tr>';
      });
      //add the table closing tag to the html variable
      html += '</table>'; 
      //now that our html variable contains the table html for this group we append it to the tables_container
      $('#tables_container').append(html);
});

HTML

Вместо того, чтобы <table> в вашем HTML-документе, у вас будет контейнер для таблиц.

<div id="tables_container"></div>

Answer 2

Вы можете сделать что-то вроде этого.

<table>
  <tr>
    <td>
      <h3>
        Group1
      </h3>
    </td>
  </tr>
  <tr>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
</tr>
  <tr>
    <td>
      <h3>
        Group2
      </h3>
    </td>
  </tr>
  <tr>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

Answer 3

Вы можете настроить это - я использовал пример из W3Schools .Это даст вам 3 столбца, объединенные в один ряд.Столбцы свернутся в один, а элементы будут наложены друг на друга, если экран слишком мал для всех трех столбцов.(запустите фрагмент и посмотрите его в действии) Я установил это с помощью карточек, которые вы можете удалить (если вы решите это сделать).Настройте его как необходимый, затем настройте соответствующие элементы HTML в вашем JavaScript.Надеюсь, это поможет!

<style>
* { box-sizing: border-box; }

.column {
    float: left;
    width: 30%;
    padding: 0 10px;
    }
 
 .row { margin: 0 10px; }
 
.row:after {
    content: "";
    display: table;
    clear: both;
    }
    
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    background-color: #F1F1F1;
    }
    
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        display: block;
        margin-bottom: 15px;
    }
}        
</style>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>

<div class="row"><!-- stretches across page -->
    <div class="column"> <!-- 1 of 3 -->
        <div class="card">
            <h1>Group 1</h1>
            <p><img src =""> name</p>
        </div>
    </div>
    
    <div class="column"> <!-- 2 of 3 -->
        <div class="card">
            <h1>Group 2</h1>
            <p><img src =""> name</p>
        </div>
    </div> 
    
    <div class="column"> <!-- 3 of 3 -->
        <div class="card">
            <h1>Group 3</h1>
            <p><img src =""> name</p>
        </div>
    </div>    

</div> <!-- end of row -->

</body>
</html>

Answer 4

Прежде всего, ваш столбец заголовка в первом ряду должен охватывать 2, чтобы соответствовать второму ряду.Это то, что вы ищете?Запустите фрагмент.

table tr > *{
  display: block;
}
table tr {
  display: table-cell;
}

<table>
  <tr>
    <td colspan="2"><h1>Group 1</h1></td>
  </tr>
  <tr>
    <td><p>Name 1</p></td>
    <td><p>IMG</p></td>
  </tr>
</table>