javascript - HTML5 Colspan - 替代品

Question

我在我的 HTML 中的一个 td 标签中使用了“colspan”。我不想在我的 HTML 中使用“colspan”。但是我仍然需要实现'colspan'实现的功能。有什么办法可以做到这一点？

Answer 1

colspan可以使用带有虚拟空单元格的表来模拟<td></td>要跨越的插槽并绝对定位应该跨越它们的单元格的效果。您需要一个相对定位的表格包装器div，因为您不能直接使表格成为定位的参考框架。

它变得相当难看，特别是因为您需要担心行高——因为使单元格绝对定位会使它远离表格格式。您可以通过使用单元格内容的副本作为要跨越的虚拟单元格的内容来处理此问题。见jsfiddle。

它变得复杂，因此任何不能处理简单的软件也colspan可能无法处理这个问题（至少如果它负责呈现文档）。

Answer 2

$(document).on('click', 'input#submitHtml', function(){
    $('htmlToSend').find('tr').removeAttr('colspan');
    // Submit the form.
});

Answer 3

您可以使用网格状结构，使用 div。

<div>
    <div class='headerrow'>

    </div>
    <div class='bodyrow'>
        <div class='bodycell'>

        </div>
        <div class='bodycell'>

        </div>
    </div>
</div>