CSS: how to dynamically grow/shrink an HTML table column_问答_开发者

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

开发者 https://www.devze.com 2022-12-10 12:57 出处：网络

I have a HTML like so: <table> <tr> <th>colA heading开发者_如何学运维</th>

I have a HTML like so:

<table>
<tr>
    <th>colA heading开发者_如何学运维</th>
    <th>colb heading</th>
</tr>
<tr>
    <td>colA content</td>
    <td>colb content</td>
</tr>
<tr>
    <th>colC heading</th>
    <th>colD heading</th>
</tr>
<tr>
    <td>colC content</td>
    <td>colC content</td>
</tr>
</table>

That products the following output:

colA heading colB heading

colA content colB content

colC heading colD heading

colC content colD content

what I want to do is detect using presumably JavaScript, if the page is wide enough, dynamically change my table look like so:

colA heading colB heading colC heading colD heading

colA content colB content colC content colD content

How can I do that using HTML (and JavaScript/CSS if need be)?

Thanks

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."

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.