HTML colspan 0 替代

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

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

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

第一行输入变量 len 包含在 mytable 第一行中的单元格数（td 或 th 元素，没关系，如果所有表的列数相同）；

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

以下代码相同，已缩短：

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

注意事项：

1. 有时表格包含一个thead、一个tbody 和一个tfoot。在这样的 如果需要使用其中之一的 id 来修改代码 要返回的列数正确。
2. 在某些情况下，给定的示例可能仅在由浏览器呈现时才有效，如果为打印而呈现，它们可能不再有效并且表格布局可能不同。

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

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;
}

<p>Click the button to change the content of the first table cell.</p>
<p>Then copy and paste some td cells for each rows forthe first and the second tr. Than run the snippet again and click the button to change the content of the first table cell to compare differences.</p>



<table id="myTable">

  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
    <td>Row1 cell3</td>
    <td>Row1 cell4</td>
    <td>Row1 cell5</td>
  </tr>

  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
    <td>Row2 cell3</td>
    <td>Row2 cell4</td>
    <td>Row2 cell5</td>
  </tr>

  <tr>
    <td id= "ext">Row3 cell1</td>
  </tr>
 
</table>
<br>



<button onclick="spanLastRowCols()">Try it</button>
Last row colSpan attribute value: <span id="info"></span>

Answer 3

<caption> 标记是well supported，它会给你一个类似于<tfoot colspan="1000"> 的结果：

table {
  background: #eee;
}

table caption {
  background: #e0e0e0;
}

td,
th {
  margin: 5px;
  padding: 5px;
}

<table>
  <thead>
    <th>Quote</th>
    <th>Author</th>
    <th>More</th>
    <tbody>
      <tr>
        <td>One cow at a time, set free the entire herd</td>
        <td colspan="2">Prosper Stupefy</td>
      </tr>
    </tbody>
    <caption style="caption-side:bottom">This will always span to the full width of the table</caption>
    <caption style="caption-side:top">A list of made-up quotes</caption>
</table>

请注意，您将需要对其进行 CSS 样式设置。

文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption