一些TD移动到新线路后多个TD

Multiple TD after some TD move to new line

本文关键字：TD 移动 一些 新线路      更新时间：2023-09-26

嗨，我正在动态生成一个表，并通过以下方式动态添加新的 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;

但这对我来说不起作用。

请编写一个正确的静态 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。如果您colspan或rowspan某处，请不要使用scope）
  • 在tbody元素中，每个实际行一行 （tr ）
  • 在每一行中，td元素的数量与标题单元格的数量一样多（除非有一些colspan或rowspan）

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

相关文章：