Table width problem

[Pemer]

I like to use the table function for stuff like simple family trees. Like the ancestor with the only table cell in the top line, his children side by side in the row below, and their children in the next row. Adjusting with colspan so every one comes in properly under the right parent and so on. The simplest way is just having BORDER=1 for the table, more advanced versions have been without table or cell borders, and I insert dividing lines in their own cells in between, and.... ah well, I won't bother you with more.

First time I played around with this it worked exactly as I wanted, when the table became a lot wider than the screen I naturally just had to scroll sideways, the table took up the width needed, and wasn't stuck with the width of the screen. However, when I kept on building generation by generation it suddenly stopped when the only cell in the top row with the original ancestor couldn't have a larger COLSPAN than 1000. After 1000 it just stopped. Any number over 1000, it still just becomes 1000 cells wide. The table can have as many cells as I want, but one cell can not adjust to more than 1000 cells in another row.

Would anyone know anything about coming around that? It's not surprising if noone has ever imagined anyone would need COLSPAN over one thousand... but pretty annoying now that I actually would.

The newer problem is that tables I start making today always get stuck at the width of the screen. No difference in my simple code between them and the old file which hit the COLSPAN=1000 "ceiling" I have discovered the "style width" parameter, so with my present project I have to increase with 100 more percent every once in a while. But if I carry on with this I will eventually reach COLSPAN>1000 here, too.

What's with this? Does anyone know any solutions? Or at least explanations?

Edited July 16, 2019 by Pemer

[Ingolme]

Most likely browsers have this limit to save memory and processing when rendering tables. The table rendering algorithm is pretty slow. Perhaps you should consider a different method to represent the family trees. In fact the tree structure of HTML is ideal for representing tree-like structures. First create the family tree structure using lists in HTML, then use CSS to style them however needed.

<ul>
  <li><span>Item 1</span>
    <ul>
      <li><span>Item 1.1</span>
        <ul>
          <li><span>Item 1.1.1</span>
            <ul>
              <li><span>Item 1.1.1.1</span>
                <ul>
                  ...
                </ul>
              </li>
              <li><span>Item 1.1.1.2</span>
                <ul>
                  ...
                </ul>
              </li>
            </ul>
          </li>
          <li><span>Item 1.1.2</span>
            <ul>
              <li><span>Item 1.1.2.1</span>
                <ul>
                  ...
                </ul>
              </li>
              <li><span>Item 1.1.2.2</span>
                <ul>
                  ...
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><span>Item 1.2</span>
        <ul>
          <li><span>Item 1.2.1</span>
            <ul>
              <li><span>Item 1.2.1.1</span>
                <ul>
                  ...
                </ul>
              </li>
              <li><span>Item 1.2.1.2</span>
                <ul>
                  ...
                </ul>
              </li>
            </ul>
          </li>
          <li><span>Item 1.2.2</span>
            <ul>
              <li><span>Item 1.2.2.1</span>
                <ul>
                  ...
                </ul>
              </li>
              <li><span>Item 1.2.2.2</span>
                <ul>
                  ...
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

For the CSS, a flex box will work

ul {
  display: flex;
  whitespace: nowrap;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  flex: 0 0 auto;
  text-align: center;
  margin: 0;
  padding: 0;
}
li span {
  display: inline-block;
  border: 1px solid #AAA;
  margin: 4px;
}

This is very basic styling, but there is barely a limit to what you can do with CSS.