ansaurus

Question

How to get multiple separate HTML tables to all be the same width as the widest table

Answer 1

+3 A:

Why can't you just set the inner tables to 100% width and let it be limited by the outer table? If it's not the case that your outer table will be limiting the inner tables, then your example isn't doing a very good job of specifying that.

The CSS "trick" you're looking for is:

table.inner { width: 100%; }

Joe Philllips 2009-02-11 19:01:47

Please see the update for why I specifically asked for anything other than this solution.

dreftymac 2009-02-11 19:30:41

The problem is, I will not know until runtime *which* table will be the "outer table". If I set 100% on *any* table, that one could potentially the "outer" one at runtime. This automatically invalidates the assumption in your explanation.

dreftymac 2009-02-11 19:57:51

But you only had to label them as you wrote them. Somehow this was not correct but Paolo's was? Don't they both require a class called "inner" on only some of the tables?

MrChrister 2009-02-11 20:32:16

Not if you surround it with a div

Joe Philllips 2009-02-11 20:39:49

@MrChrister: Paolo's was the accepted answer not because it was complete but because he came the closest to actually answering what I asked. Paolo's answer becomes more complete if you append a "depth" integer to the className (e.g., inner0, inner1, inner2, etc.), thus treating depths uniquely.

dreftymac 2009-02-11 20:43:24

Did you try my solution and see if it worked?

Joe Philllips 2009-02-11 20:57:05

@d03boy: I tried the surrounding div idea. No Worky (see below). I didn't try table.inner because that clearly will not work because of the recursion problem. Anyway, thanks for your answers and ideas.

dreftymac 2009-02-11 21:07:09

If you find a working example of the answer you should let us know

Joe Philllips 2009-02-11 21:12:32

Answer 2

A:

I don't see how you can get around width:100%. That is in essence what you are trying to do: set the width of each table to the total width of the containing element, whose width is determined by the widest embedded table in that column.

Edited to add:

If you really want to avoid it at all costs, you can always use prototype to get the actual widths of elements in pixels, and then re-apply the maximum width to all the other elements. Could probably be done easily using prototype and behaviors.

Mainegreen 2009-02-11 19:04:01

Answer 3

+1 A:

You could use JavaScript to update each table's width according to the widest one. But I have a feeling you're looking for a script-less solution... (right?)

Assaf Lavie 2009-02-11 19:05:17

Is there any CSS or JQuery or Javascript trick <---

dreftymac 2009-02-11 19:09:52

Answer 4

+3 A:

I do not know of any HTML/CSS tricks to get it done, but since you are open to jQuery...

Assuming all your inner tables have a class of 'inner', you could do something like this:

$(document).ready(function() {
    var largest = 0;
    $('table.inner').each(function() {
        var width = $(this)[0].offsetWidth;
        if(width > largest) {
            largest = width;
        }
    }).width(largest);
});

EDIT: updated my answer to use offsetWidth instead of jQuery's width(), as the latter does not include border, padding, or margins in it. Tested it on IE7, FF, Safari, Opera, and it gives the desired effect.

Paolo Bergantino 2009-02-11 19:20:26

I don't know if this will work if the table.inner's are recursive.

Joe Philllips 2009-02-11 20:22:53

@Paolo: This by itself will not work but offsetWidth is a good idea that no one else seemed to think of. An improvement would be to append a 'depth' integer to the className and use a recursive function to treat each depth-level as a set.

dreftymac 2009-02-11 20:45:32

@dreftymac: is there anyway you could give me a sample HTML code of the nested tables and how they would look like + do you have any control over putting different classes depending on depth? I can edit my answer to accommodate then. Either way, hope it helped.

Paolo Bergantino 2009-02-12 01:25:50

Thanks Paolo - great solution.

thethinman 2010-05-12 21:42:01

Answer 5

+1 A:

Code the inner tables to all have width=100%, then they will all be as wide as the outer table. If you want all the columns of the inner tables to be the same width, then you'd have to specify those widths on their column headers (or first rows).

<HTML>
<HEAD>

<TITLE>Mike Test</TITLE>
</HEAD>
<BODY>

<table border=1>
  <tr><td>
    <table border=1>
      <tr>
      <td>First</td>
      <td>Second</td>
      </tr>
    </table>
  </td></tr>
  <tr><td>
    <table border=1>
      <tr>
      <td>1</td>
      <td>2</td>
      </tr>
    </table>
  </td></tr>
</table>



<table border=1>
  <tr><td>
    <table border=1 width="100%">
      <tr>
      <td>First</td>
      <td>Second</td>
      </tr>
    </table>
  </td></tr>
  <tr><td>
    <table border=1 width="100%">
      <tr>
      <td>1</td>
      <td>2</td>
      </tr>
    </table>
  </td></tr>
</table>

</BODY>
</HTML>

Michael Kohne 2009-02-11 19:25:17

Answer 6

A:

I also do not know until runtime which table will be the "outermost" table (this is a recursively-generated structure of potentially unlimited depth).

Do you need to know?

wrap everything around a div or table, give it a fixed or percentage width to make it right into your web design, then all the container tables should be set to 100%

.content-wrapper { width: 450px; }
table { width: 100%; }

<div id="content-wrapper">
    <!-- all your tables/content/divs/etc -->
</div>

that is what everyone does, and that is why in all design elements on code you have DIV's called Wrappers, to get to your point.

Please don't try to re-invent the wheel... everyone does this, you're not the first one.

balexandre 2009-02-11 19:46:01

The problem is, I want content-wrapper to be as wide as the fattest child table *and no wider than that*. In other words, I want content-wrapper to be as small as possible without it clipping the text of any child table. Your answer assumes 450px which is not what I am asking at all.

dreftymac 2009-02-11 20:29:12

Actually his doesn't assume 450px since he assigns that width to the CLASS content-wrapper and then gives his div an ID of content-wrapper. SO his div really doesn't have a width. And it still works properly.

Joe Philllips 2009-02-11 20:41:49

@d03boy: Your point about CLASS versus ID is correct, in reality though it was probably just a typo and even if not, it still doesn't work because the 100% causes the tables to span the full width of the page. The outer DIV just blindly expands 100% to accommodate them.

dreftymac 2009-02-11 20:57:18

I see that now. I didn't think the div would expand with them.

Joe Philllips 2009-02-11 21:11:37

ansaurus

tags:

views:

answers:

How to get multiple separate HTML tables to all be the same width as the widest table

related questions