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>

HTML5 Colspan - 替代方案

3 个答案: