Question

我有一个像这样的HTML：

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

该产品的输出如下：

colA标题colB标题
colA内容colB内容
colC标题colD标题
colC content colD content

我想要做的是使用大概JavaScript检测，如果页面足够宽，动态更改我的表格如下：

colA标题colB标题colC标题colD标题
colA content colB content colC content colD content

如何使用HTML（以及JavaScript / CSS，如果需要）？

由于

Answer 1

如果我理解你的问题，可以通过将表分成两个表来实现，如下所示：

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

边界仅为了便于测试。你需要做的就是将其中一个单元格的内容设置为“colb headingggggggggggggggggggggggggggggggggggggg”。

Answer 2

泰德，

这可能更像是DOM（文档对象模型）问题吗？

从Wiki页面引用（因为我缺乏实践专业知识）：

网络浏览器

Web浏览器没有义务使用DOM来呈现HTML文档。但是，希望动态检查或修改网页的JavaScript脚本需要DOM。换句话说，文档对象模型是JavaScript看到其包含HTML页面和浏览器状态的方式。

因此，您可以尝试使用Javascript DOM技术搜索一些HOWTO文档。

Answer 3

您如何确定该表应该能够放在一个表中？

您是从两张桌子，一张桌子还是一张桌子开始 - > 2？

最简单的方法是从一个表开始，如果滚动条处于活动状态，则执行类似以下小部分的操作。您应该在firefox中使用firebug来检查表的dom属性，以确定要使用的属性。

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);

您需要使用document.getElementById来获取要从中提取的表格，然后标题将位于table.rows[0]中，这样您就可以解析该行中的单元格并获取值我把标题放在上面。

然后，您需要使用tableelem功能将appendChild添加到div。

CSS：如何动态增长/缩小HTML表列

3 个答案: