title: How to get multiple separate HTML tables to all be the same width as the widest table
body: <p><strong>Problem:</strong> I have HTML markup to deal with that consists of multiple tables nested inside another table. I would like the "inner tables" to all be the same width. I would also like all of the "inner tables" to be no wider than the width of the widest "inner table" in its natural state.</p>
  
  <p>I do <em>not</em> want to simply set the width of all the tables to some fixed percentage, as I do not know in advance what the width of the widest "inner table" should be until the HTML page is actually generated.</p>
  
  <p><img src="https://upload.wikimedia.org/wikipedia/en/0/00/Erasene-screen001.png" alt="Here is a visual example"></p>
  
  <p><sup><sub>Source: <a href="https://en.wikipedia.org/wiki/File:Erasene-screen001.png" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/File:Erasene-screen001.png</a></sub></sup></p>
  
  <p>I want all tables to be the same width as inner-table-zero. Currently, none of the tables have an assigned width, and that's the way I like it, because I want all inner tables to naturally choose the width of whichever table is widest by default.</p>
  
  <p><strong>Question:</strong> Is there any CSS or JQuery or Javascript trick anyone knows that will obtain this desired styling?</p>
  
  <p><strong>Update:</strong> I'm about to delete this question because people seem to want to downvote me for not having a good reason for not wanting 100%. I <strong>do</strong> have a good reason ... I also do not know until runtime <em>which</em> table will be the "outermost" table (this is a recursively-generated structure of potentially unlimited depth).</p>