HTML5 Colspan - 替代方案

Question

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

- AJJ

---

有没有任何理由不使用默认方式来实现结果？ - Sirko

不要使用表格，而是使用浮动的div来构建网格。 - jtheman

@Sirko，因为HTML将被发送到后端进行一些处理，而后端不接受colspan。因此，为了避免这种情况，我们需要找到一个替代方案。 - AJJ

听起来你正在寻找一种应对另一个问题的方法。你正将 HTML 发送到后端进行处理，但是它不“接受” colspan？非常奇怪，可能需要提供一些上下文信息，或者以其他方式处理你的数据。 - Wesley Murch

表格适合展示类似电子表格等数据，只要不用于定义网站结构就行。 - Cerbrus

Answer 1

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

这变得相当丑陋，特别是因为您需要关注行高度 - 因为使单元格绝对定位会使其脱离表格格式。您可以通过使用单元格内容的副本作为要跨越的虚拟单元格的内容来处理此问题。请参见 jsfiddle。

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

- Jukka K. Korpela

---

空单元格不能模拟colspan...它们只是添加了一堆列。colspan可以将多个列合并为一列。 - Haldrich98

Answer 2

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

- Talha Ahmed Khan

Answer 3

你可以使用类似网格结构的方式，使用 div 元素。

<div>
    <div class='headerrow'>

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

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

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

- Avinesh Kumar