Есть ли способ автоматически разделить длинную таблицу HTML с тремя столбцами на большее количество столбцов?

У меня есть таблица, которая создается запросами PHP в MySql.

Немного контекста: Запросы существуют для поиска и подсчета определенного типа оборудования, найденного в базе данных под названием «Аппаратное обеспечение». База данных «userdata» содержит все пользовательские данные, включая тип используемого оборудования. Запрос отображает тип оборудования, подсчитывает их в базе данных пользовательских данных и отображает это число после типа оборудования. Таким образом, я знаю количество используемого оборудования определенного типа. Затем каждая итерация отображает HTML-код для таблицы.

Дело в том, что таблица слишком длинная для моей информационной панели, и мне бы хотелось, чтобы она была разделена на большее количество столбцов. В настоящее время таблица имеет ширину 3 столбца и отображает тип оборудования, номер и кнопку поиска.

Вывод немного обширен и имеет некоторое форматирование, поэтому приносим извинения за загромождение.

<table id = "hwcounter" align = "left" cellspacing = "3" cellpadding = "3" width = "25%">
  <tr>
    <td>
      <font size = "5">
        <font size = "5"><b>Hardware Overview</b></font>
  </tr>

  <tr>
    <td align = "left"><b>Hardware Type</b></td>
    <td align = "left"><b>Number at customers</b></td>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Lenovo t480c
      <td>1</td>
      <td style = "width:15px" align = "left"><small> <input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20t480c" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo T490c
      <td>7</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20T490c" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Lenovo T14g1
      <td>36</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20T14g1" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo X13g1 PF
      <td>8</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20X13g1%20PF" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Lenovo T14g1_ac
      <td>2</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20T14g1_ac" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo P15
      <td>1</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20P15" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Lenovo T14g2
      <td>123</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20T14g2" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo X13g2 PF
      <td>18</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20X13g2%20PF" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Apple iPad Pro
      <td>17</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Apple%20iPad%20Pro" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo T14g2_ac
      <td>4</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20T14g2_ac" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Lenovo X13g2 NP
      <td>3</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20X13g2%20NP" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo T14g3_ac
      <td>7</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20T14g3_ac" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Lenovo X13g3 PF
      <td>22</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20X13g3%20PF" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo T14g3
      <td>34</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20T14g3" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>ThinkCentre M90
      <td>1</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=ThinkCentre%20M90" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo X13g4
      <td>8</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20X13g4" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>Lenovo X13g3
      <td>1</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20X13g3" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>Lenovo P16g1
      <td>1</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=Lenovo%20P16g1" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>HP ZBOOK G11
      <td>1</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=HP%20ZBOOK%20G11" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#eeeeee">
    <td>HP x360 G10 cp
      <td>2</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=HP%20x360%20G10%20cp" value = "View List" /></small></td>
  </tr>
  </tr>
  <tr bgcolor = "#ffffff">
    <td>HP 840 G10
      <td>4</td>
      <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname=HP%20840%20G10" value = "View List" /></small></td>
  </tr>
  </tr>
  <br />
  <hr>
</table>

Есть ли способ автоматически «разбить» таблицу в строке 10 (например) и переместить остальную часть в следующую группу столбцов? и т. д. и т. п.?

Я посмотрел CSS Grid и т. д., но, похоже, он не работает. https://jsfiddle.net/6pnrygjp/ С интервалом было ближе всего, но я не могу использовать 3 столбца. Это все смешивает

🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Php121685 вопросов Html113619 вопросов Css75481 вопрос

Ответ:

Решено

Да... используйте часто упускаемое из виду свойство Столбцы.

.d1 {
  columns: 4;
}

<div class = "d1">
<table>
<tr><td>R1 C1</td><td>R1 C2</td></tr>
<tr><td>R2 C1</td><td>R2 C2</td></tr>
<tr><td>R3 C1</td><td>R3 C2</td></tr>
<tr><td>R4 C1</td><td>R4 C2</td></tr>
<tr><td>R5 C1</td><td>R5 C2</td></tr>
<tr><td>R6 C1</td><td>R6 C2</td></tr>
<tr><td>R7 C1</td><td>R7 C2</td></tr>
<tr><td>R8 C1</td><td>R8 C2</td></tr>
<tr><td>R9 C1</td><td>R9 C2</td></tr>
<tr><td>R10 C1</td><td>R10 C2</td></tr>
<tr><td>R11 C1</td><td>R11 C2</td></tr>
<tr><td>R12 C1</td><td>R12 C2</td></tr>
<tr><td>R13 C1</td><td>R13 C2</td></tr>
<tr><td>R14 C1</td><td>R14 C2</td></tr>
<tr><td>R15 C1</td><td>R15 C2</td></tr>
<tr><td>R16 C1</td><td>R16 C2</td></tr>
<tr><td>R17 C1</td><td>R17 C2</td></tr>
<tr><td>R18 C1</td><td>R18 C2</td></tr>
<tr><td>R19 C1</td><td>R19 C2</td></tr>
<tr><td>R20 C1</td><td>R20 C2</td></tr>
<tr><td>R21 C1</td><td>R21 C2</td></tr>
<tr><td>R22 C1</td><td>R22 C2</td></tr>
<tr><td>R23 C1</td><td>R23 C2</td></tr>
</table>
</div>

Есть ли способ автоматически разделить длинную таблицу HTML с тремя столбцами на большее количество столбцов?

Ответ:

Интересные вопросы для изучения