ansaurus

Question

CSS: how to dynamically grow/shrink an HTML table column

Answer 1

A:

Ted,

Might this be more of a DOM (Document Object Model) question?

Quoting from the Wiki page (since I lack hands-on expertise in this):

Web browsers

A web browser is not obliged to use DOM in order to render an HTML document. However, the DOM is required by JavaScript scripts that wish to inspect or modify a web page dynamically. In other words, the Document Object Model is the way JavaScript sees its containing HTML page and browser state.

So you might try searching through some HOWTO documents on using Javascript DOM techniques.

Jim Dennis 2009-11-02 19:59:33

@Jim Dennis, thanks. Unfortunately I haven't been able to figure out how to do this myself ... which is why I created this topic on Stackoverflow.

Ted 2009-11-02 20:06:19

Answer 2

+1 A:

If I understand your question correctly, this is achievable by splitting your table into two tables, like so:

<head>
    <style>
        .bigBox {
            margin: 0px;
            padding: 0px;
            float: left;
            clear: right;
            display: inline;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table class="bigBox">
        <tr>
            <th>colA heading</th>
            <th>colb heading</th>
        </tr>
        <tr>
            <td>colA content</td>
            <td>colb content</td>
        </tr>
    </table>
    <table class="bigBox">
        <tr>
            <th>colC heading</th>
            <th>colD heading</th>
        </tr>
        <tr>
            <td>colC content</td>
            <td>colC content</td>
        </tr>
    </table>
</body>

The border is for ease of testing only. All you have to do to test is set the contents of one of the cells to something like "colb headingggggggggggggggggggggggggggggggggggggg."

Lord Torgamus 2009-11-02 20:18:00

Good answer, but the drawback is that semantically, it's no longer a single table, but that might not be a problem in this specific case.

Niels Bom 2009-11-03 00:15:54

Answer 3

A:

How would you determine that the table should be able to fit in one table?

Are you starting from two tables, going to one table, or from one -> 2?

It would be easiest to either start with one table, and if the scrollbars are active then do something like the following tiny snippet. You should use firebug, in firefox, to examine the dom attributes of the table, to determine the properties to use.

var tableelem = document.createElement('table');
var thead = document.createElement('thead');
for(var t = 0; t < 2; t++) {
  var trow = document.createElement('tr');
  var tdata = document.createElement('td');
  tdata.appendChild(document.createTextNode('header'));
  thead.appendChild(trow);
}
tableelem.appendChild(thead);

You will need to use document.getElementById to get the table you will be pulling from, and then the header will be in table.rows[0], so you can parse the cells in that row and get the values where I put header above.

You will then need to add the tableelem to the div using the appendChild function.

James Black 2009-11-02 20:28:44

ansaurus

tags:

views:

answers:

CSS: how to dynamically grow/shrink an HTML table column

related questions