Search code examples
javascriptphphtmlcss

Is there a way to automatically split a long three columned HTML table into more columns

I have a table that is being generated by PHP queries in MySql

A bit of context: The queries exist of a search and count for a certain hardware type found in database called "hardware". The "userdata" database holds all user data including which hardware type they use. The query plots the hardware type and counts them in the userdata database and plots that number behind the hardware type. This way I know the amound of a certain hardware type being in use. Each itteration then plots the HTML code for the table.

The thing is, the table is a bit too long for my dashboard, and I would like to see it split in more columns. Currently the table is 3 columns wide, displaying hardware type, the number and a search button.

The output is a bit extensive and it has some formatting so apologies for the cluttering.

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

Is there a way to automatically "break" of the table at row 10 (e.g.) and move the rest into a next group of columns? etc etc?

I looked at CSS Grid etc, but it doesn't seem to work. https://jsfiddle.net/6pnrygjp/ With span came closest, but I cannot use 3 columns. It mixes everything up

Solution

  • Yes ... use the often-overlooked columns property.

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