Question

我有一个HTML表格，我想给最后一行（在<tfoot>标签中）只有一个单元格扩展到所有表格。

我正在使用colspan="0"，然后我看到它只适用于Firefox。然后我尝试了colspan="100%"。它工作正常，但没有通过w3c验证器（在我的项目中非常重要）。

是否有可行的替代方案？

我看到有人使用colspan="1000"，这不是一个坏主意，但是有一些性能问题吗？

感谢您的建议。

Answer 1

我的第一个答案是：重构您的代码。如果您需要用于构建表格页脚的总列数，那么用于构建表格主体的函数应该返回该数字（而不仅仅是HTML）。

这就是说，只有在它过于复杂的情况下（或者您无法控制该代码），您可以自己计算它们，我会避免任何关于colspan的伎俩因为它的行为不是同质的（并且它也没有经过验证）。

您可以使用第一行轻松计算单元格数（如果表格格式正确，则所有行具有相同的列数）。

第一个天真的解决方案是split() HTML tbody，然后是substr_count()第一行的<td/>。不幸的是，这可能仅在非常受控的情况下起作用（表必须格式正确，表可能包含或不包含tbody，并且它不管理那些单元格的colspan。

更好的解决方案涉及一个小的 HTML解析器（请参阅this great post here on SO获取详细清单），当您拥有 DOM 时，您可以轻松计算TD和检查他们的属性（我事先说的是：不，你不能使用正则表达式解析HTML ）。

老实说，我认为重构更合适......

Answer 2

我可能使用以下代码也很有用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <img src="http://www.awflasher.com/300x300_demo.png" />
  <canvas id="overlap"></canvas>
</div>

<h3>
    Output:
    </h3>
<input id="output" type="text" />

<p>
  Why the output is 350x354, not 350x350 as expected?
</p>

第一行进入变量len，包含在mytable的第一行中的单元格数（td或th元素，无关紧要，如果所有表具有相同的列数）;

第二行修改位于最后一行的目标单元格的colspan属性/属性，并将其设置为先前获得的值。

以下代码有相同的缩写：

var len = document.getElementById("myTable").rows[0].cells.length;
document.getElementById("myTablelastrowfirstcell").colSpan = len;

说明：

有时桌子上有一个thead，一个tbody和一个tfoot。在这样的如果需要使用其中一个的id修改代码具有正确的列数以便返回。
在某些情况下，给定的示例可能仅在浏览器呈现时才起作用，如果呈现为打印，它们可能将不再起作用，并且表格布局可能不同。

工作示例（单击代码末尾的运行代码示例以运行它并查看其运行方式）：

document.getElementById("myTablelastrowfirstcell").colSpan = document.getElementById("myTable").rows[0].cells.length;

function spanLastRowCols() {
  var len = document.getElementById("myTable").rows[0].cells.length;
  var len = document.getElementById("ext").colSpan = len;

  info.innerText = len;
}

table, td {
    border: 1px solid black;
}

Answer 3

<tfoot>与colspan很难 <caption>很简单：

<caption style="caption-side:bottom">i will span</caption>

示例：https://www.w3schools.com/tags/tag_caption.asp

HTML colspan 0替代

3 个答案:

说明：