Есть ли способ автоматически разделить длинную таблицу 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 столбца. Это все смешивает
Что касается проблемы, не можете ли вы внести изменения в PHP, чтобы сгенерировать таблицу для вывода 6 столбцов? 2 пары типа/номера одновременно? Использование JS для этого в лучшем случае является решением проблемы.
Вы можете либо создать несколько таблиц и разместить их рядом друг с другом, используя display: inline-table или что-то в этом роде. Или, если вы хотите, чтобы все это было в одной таблице, вам нужно будет заранее определить, сколько записей вам нужно отобразить, а затем поместить данные в правильные столбцы в правильную строку для начала. (То есть ваши данные из записи №1 должны поместиться в ячейки 1, 2 и 3 первой строки, а затем вам нужно продолжить создание ячеек 4, 5 и 6 с данными из 11-й записи, прежде чем вы фактически снова закройте эту строку </tr>...
Привет, Рори. Я не эксперт, как видите :) Кодировку HTML исправлю. Спасибо за ваши советы. Как я могу получить 2 результата за одну итерацию, чтобы создать 6 столбцов? Это код PHP // извлекает все типы оборудования $qhwtype = "выберите тип_оборудования из оборудования"; $rhwtype=mysqli_query($dbc,$qhwtype);
// построить таблицу while ($hwrow = mysqli_fetch_row($rhwtype)){ $bg = ($bg=='#eeeeee' ? '#ffffff' : '#eeeeee'); // Переключение цвета фона. echo '<tr bgcolor = "' . $bg . '">'; foreach ($hwrow as $item) { // отображение известных типов оборудования echo '<td>' . htmlspecialchars($item) . '<td>'; $qhwcount = "выберите * из пользовательских данных, где current_hardware='$item'";
// подсчет количества каждого типа оборудования среди пользователей $rhwcount=mysqli_query($dbc,$qhwcount); echo mysqli_num_rows($rhwcount) . '</td> <td style = "width:15px" align = "left"><small><input type = "button" class = "formbutton" onclick=window.location.href = "search_client.php?keyname= ' .$hwsearchstring = str_replace(' ','%20', $item) '" value = "Список просмотра" /></small></td>'; } эхо '</tr>';
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Да... используйте часто упускаемое из виду свойство Столбцы.
.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>Это очень круто! Единственное, что я не знаю, как это сделать, и возможно ли это, - это поместить заголовок таблицы над каждым столбцом. Возможно ли это вообще?
Не этим методом, нет.
ХОРОШО. Большое спасибо! Это очень помогает
Я использую Firefox, но не вижу таблицы, разделенной на 4 столбца, это нормально?
Вы можете использовать тень текста, чтобы поместить заголовки столбцов, если вы знаете ширину, на которую их следует сместить.
Помимо этого, вам следует исправить качество HTML. Ваша таблица недействительна, поскольку в ней есть дополнительные ненужные теги
</tr>, а также<hr>и<br>, которых там быть не должно, а элементыinputне должны находиться внутри теговsmall. Наконец, тегиfontи атрибутbgcolorустарели почти 20 лет назад, вместо них используйте CSS. Точно так же не используйте атрибутыonclick— привязывайте свои обработчики событий к JS, а не к HTML — однако даже в этом случае вы используете элементbuttonдля перенаправления страницы с помощью JS, просто используйте элементaи вообще устраните необходимость в JS.