How to do colspan for more than 1000 columns in a HTML table?-CodePudding

I have a table with 1440 columns in 1 row and 1 columns in another row. I am able to do colspan up to 1000 columns. How can I make it working for 1440 columns, If not possible is there any alternative ways to achieve this?

<table>
     <tr><td colespan="1440"><SLIDER></td></tr>
     <tr>
          <td id="test_1"></td>
          <td id="test_2"></td>
          <td id="test_3"></td>
          .
          .
          .
          <td id="test_1440"></td>
     </tr>
</table>

Edit : I have a slider move through all 1440 columns. So multiple td is not possible

CodePudding user response：

If your number of colspan is greater than 1000 you can use the following 'trick' by adding the following code snippet that will check if your colspan number is greater than 1000 and then create a second <td> tag :

if (colspan_count > 1000)
  <td colspan='1000'></td>
  <td colspan='colspan_count - 1000'></td>

The following link will also help you :

Maximum colspan

CodePudding user response：

As already stated you should use div(s) instead of table :

Just consider <div class = "table-data"></div> as td tag .

Here is the code :

<!DOCTYPE html>
<html>
    <head>
        <style>
            #colspan{
                border: 3px solid black;
                padding: 7px;
                margin-bottom: 10px;

            }
            .table-data{
                border: 3px solid black;
                padding: 10px;
                display: inline;
            }
            .table{
                display: table;
            }
        </style>


    </head>
    <body>
        <div class = "table">
        <div id = "colspan"></div>
        <div>
            
            <div class = "table-data"></div>
            <div class = "table-data"></div>
            <div class = "table-data"></div>
            <div class = "table-data"></div>
            ....
            <div class = "table-data"></div>
            <div class = "table-data"></div>
        
        </div>
    </div>

    </body>
</html>

This should solve the problem of more than 1000 columns.

CodePudding user response：

One of the solutions is to use CSS Grid display: contents CSS Variables, with a small JS script that adds variables about the positioning of the element to each CSS element.

Unfortunately, CSS Grids in Chrome also had a limit of 1000 columns (and rows), but in the most recent versions (like Chrome >= 96) it is quite possible to use more than 1000 columns. It works fine in Firefox. Example below (Firefox & Chrome >= 96):

Example below:

/* Attention: In Chrome, this example works correctly only in version >= 96 */

/* -- BEGIN - JUST GENERATE CONTENT HERE */
let content = "";
for (let i = 0; i <= 1450; i  ) {
  content  = `<td id="test_${i}">${i}</td>`;
}
document.querySelector(".grid-table tr:last-child").innerHTML = content;
/* -- END */

function tableToGrid(tableElement) {
  Array.from(tableElement.tBodies[0].rows).forEach((tr, rowIndex) => {
    let tdLastPos = 1;
    Array.from(tr.cells).forEach((td, colIndex) => {
      const colspan = Number(td.getAttribute("colspan") || 1);
      td.style.setProperty("--col-position", tdLastPos);
      td.style.setProperty("--colspan", colspan);
      td.style.setProperty("--row-index", rowIndex   1);
      tdLastPos  = colspan;
    });
  });
}

tableToGrid(document.querySelector(".grid-table"));

.grid-table tbody {
  display: grid;
}

.grid-table tr {
  display: contents;
}

.grid-table tr td {
  grid-column: var(--col-position, 1) / span var(--colspan, 1);
  grid-row: var(--row-index);
}

<table >
  <tr>
    <td colspan="5" style="background-color: pink;">slider 1</td>
    <td colspan="1440" style="background-color: green">slider 2</td>
    <td colspan="5" style="background-color: pink;">slider 3</td>
  </tr>
  <tr>
    <td id="test_1">1</td>
    <td id="test_2">2</td>
    <td id="test_3">3</td>
    <td id="test_1440">4</td>
  </tr>
</table>

But to be honest, I would recommend that you refactor the code, since such large tables are quite slow to render and do not work well on mobile devices.