Question

您好我正在动态生成一个表，并以下列方式动态添加新的TR和TD。

$('#tableId').append('<tr><th colspan="2"></th>');

上面的代码只在我的代码中调用一次。

然后我按以下方式将TD添加到其中：

var tempurl = 'http://google.com';
$('<td>').appendTo($('#tableId')).html("<a href='"+tempurl+"'>"+tempurl+"</a>");

我面临的问题是，所有TD都在一行中对齐（仅在同一行中），并且我的页面宽度增加了很多倍。

我尝试将css添加到表中，这样如果表格大小超过TD，则应转到下一行：

max-width: 90%;
display: block;

和

display: inline;

但这对我没用。

Answer 1

请编写正确的静态HTML表格，然后使用此代码动态生成一个仍然正确的表格。

以下是此类表格的示例：

<table>
    <caption>Google results</caption>
    <thead>
        <tr>
            <th scope="col">Title and link</th>
            <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="http://domain.com/1">Stack Overflow</a>
            </td>
            <td>Stack Overflow is a website (...)</td>
        </tr>
        <tr>
            <td>
                <a href="http://domain.com/2">Stack Exchange</a>
            </td>
            <td>Stack Exchange is a website (...)</td>
        </tr>
    </tbody>
</table>

不需要跨越所有行的标题单元格：您可能打算将其作为标题
在垂直表格中，您应该在th元素的每个列的顶部有一个标题单元格（thead）（由于可访问性原因，我添加了scope="col"属性。如果标题单元格位于每行的左侧，则为row。如果您scope或colspan某处，请不要使用rowspan
在tbody元素中，每行（tr）每个实际行
，与标题单元格一样多td个元素（除非有colspan或rowspan）

编辑：为什么你有2个不同的id？混乱。

一些TD转移到新线后的多个TD

1 个答案: