HTML colspan 0 替代

Posted 2023-03-05

【中文标题】HTML colspan 0 替代

【英文标题】：HTML colspan 0 alternative

【发布时间】：2013-06-24 19:42:06

【问题描述】：

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

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

有没有可行的替代方案？

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

感谢您的建议。

【问题讨论】：

您应该使用colspan="3"，其中3 是总列数。

我忘了说它将用于多个表，具有不同的列号，自动生成。我永远不会知道这个数字，我也不想使用 javascript...我只知道它必须占用所有表格宽度。

用什么自动生成的？ php？如果它是自动生成的，你可以获得正确的属性。

好吧，如果您需要列数，那么我也会重构您的 PHP 代码以返回列数。欺骗浏览器关于 colspan 并不是一个好主意（特别是如果你想要/需要遵守）。许多事情留给用户代理实现（=未定义），因此这些事情按情况工作（并且 100% 工作，因为它被理解为“100”，因此它会随着列数的增加而中断）。

是的，这是唯一的方法，请确保计算 PHP 代码中的列数，然后当您 echo 退出表格时，您可以回显正确的 colspan号码

【参考方案1】：

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

也就是说，如果它太复杂（或者您无法控制该代码），您可以自己计算它们，我会避免任何关于 colspan 的技巧，因为它是行为不是同质的（也没有经过验证）。

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

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

更好的解决方案涉及一个小型 HTML 解析器（请参阅 this great post here on SO 以获得详细的列表），当您拥有 DOM 时，您可以轻松计算 TD 并检查它们的属性（我提前说：不，你不能使用正则表达式来解析 HTML）。

说实话我觉得重构更合适...

【讨论】：

谢谢，我会的。这么简单的老东西竟然只有一个浏览器支持，我还是有点震惊的。

@FC' 好吧，它不是标准的一部分，但我想知道它从未被包括在内，我不得不说它并不少见，它会让我们的生活变得轻松（但它可能会使 UA 计算复杂化对于复杂的布局）

我只是查看了 w3c 文档。他们为 HTML5 删除了这个，但只针对 colspan。 0 是仅适用于行跨度的有效值。你在开玩笑吗？

@FC' 哈哈，好吧，一行不需要包含所有列，计算起来可能很棘手......

【参考方案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;

注意事项：

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

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

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>

【讨论】：

请注意，您还可以创建一个在节点（行节点）而不是节点 ID 中传递的 javascript 函数，然后从每个 tr 调用该函数通过this.

@not-just-yeti，你能举个例子吗？谢谢

【参考方案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

【讨论】：

很遗憾，这并没有设置行和列中的内容。