8

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

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

有没有可行的选择？

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

谢谢你的建议。

4

3 回答 3

5

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

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

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

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

更好的解决方案涉及一个小型HTML 解析器（有关详细列表，请参阅SO 上的这篇精彩文章），当您拥有DOM时，您可以轻松计算 TD 并检查它们的属性（我提前说：不，你可以' t 使用正则表达式解析 HTML）。

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

于 2013-06-27T11:19:17.630 回答
1

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

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>

于 2016-10-05T12:24:22.380 回答
0

该<caption>标签得到很好的支持，会给你类似的结果<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

于 2020-06-28T12:14:10.750 回答