logo标签列表

合并所有列

htmlhtml-tabletablelayout
522

如何指定一个 td 标签跨越所有列（当HTML被渲染时，表格中确切的列数会是不确定/难以确定的）？w3schools 提到可以使用 colspan="0"，但它没有明确说明哪些浏览器支持该值（我们需要支持IE 6）。

看起来将 colspan 设置为大于您可能拥有的理论列数的值将起作用，但如果您将 table-layout 设置为 fixed，则不起作用。使用具有大量 colspan 的自动布局是否有任何缺点？是否有更正确的方法来实现这一点？

4
接受的答案是关于如何不这样做的，似乎有严重的性能/一致性问题。所以我想答案是：硬编码列数。我没有看到任何可行的替代方案。 - Andrew Koster
2
很好的问题，但如果没有一个答案是正确的，你应该不接受任何答案。 - HoldOffHunger
15个回答
0
一个 CSS 的解决方案会是理想的，但我找不到一个，所以这里提供一个 JavaScript 的解决方案：对于一个给定类的 tr 元素，通过选择整行、计算其 td 元素及其 colSpan 属性的数量，并将扩展后的行设置为 el.colSpan = newcolspan;。就像这样... 

var headertablerows = document.getElementsByClassName('max-col-span');

[].forEach.call(headertablerows, function (headertablerow) {
    var colspan = 0;
    [].forEach.call(headertablerow.nextElementSibling.children, function (child) {
        colspan += child.colSpan ? parseInt(child.colSpan, 10) : 1;
    });
    
    headertablerow.children[0].colSpan = colspan;
});
html {
  font-family: Verdana;
}
tr > * {
  padding: 1rem;
  box-shadow: 0 0 8px gray inset;
}
  <table>
    <tr class="max-col-span">
      <td>1 - max width
      </td>
    </tr>
    <tr>
      <td>2 - no colspan
      </td>
      <td colspan="2">3 - colspan is 2
      </td>
    </tr>
  </table>

如果您正在使用表格 headers ，则可能需要进行调整，但是这应该提供了一种使用 100％纯JavaScript的概念验证方法。

0

还有其他人觉得为了这个看似小问题而深入研究JS有点过分吗？

纯CSS

嘿！我有一个纯CSS的解决方案可以给你！下面是一个示例，你只需要给要跨越所有列的行添加一个类。然后CSS将使第一个<td>元素跨越整个宽度，并隐藏其余的<td>元素。（对于此操作，您必须使用visibility:hidden;而不是display:none;）

注意：为了使此方法正常渲染，您至少需要两个单元格，并且如果保持正确数量的<td>元素，CSS将呈现最佳效果 - 不要删除任何元素以腾出空间来放置跨越元素。这将有助于确保单元格/行仍然正常流动。

示例

/* standard styling css */

table {
  border-collapse: collapse;
}

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

td {
  padding: 3px;
}

/* make full width class span the whole table */

.full-span {
  position:relative;
}

.full-span > * {
  visibility: hidden;
  border:0;
}

.full-span > *:nth-child(1) {
  display: block;
  visibility: unset;
  position:absolute;
}
<table>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
    </tr>
    <tr class="full-span">
      <td>B1 long text</td>
      <td>B2</td>
      <td>B3</td>
      <td>B4</td>
    </tr>
    <tr>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
      <td>C4</td>
    </tr>
    <tr>
      <td>D1</td>
      <td>D2</td>
      <td>D3</td>
      <td>D4</td>
    </tr>
  </tbody>
</table>

额外提示！

如果你在PHP/JS中动态生成表格，这个方法可以简化你的代码。假设你正在通过循环遍历一个二维数组来创建表格：对于每一行需要跨越所有列的情况，你需要添加一些逻辑来计算列数，添加colspan属性，添加任何剩余的<td>元素以填满整个表格的宽度等等。

使用我的方法，你可以遍历所有列并输出它们，然后简单地在父行中包含该类。

-1
上面有很多复杂的答案，但可以非常简单地解决。
要么（因为您永远不会有超过1000列的表）：
td colspan=1000

或者如果你想非常具体化，而且不介意使用jQuery：

$('table td.whichCol').attr('colspan',$('table tr:first td').length)

其中： "td.whichCol" 指定要合并的列的类名

其中： "$('table tr:first td').length" 计算表格第一行的列数。

-2

我只想分享我的经验并回答这个问题。
注意：这仅在您有预定义的table和一个带有th的tr时有效，但是通过动态加载行（例如通过AJAX）。

在这种情况下，您可以计算第一个标题行中有多少个th，并使用它来跨越整个列。

当您想要在没有找到结果时传达消息时，可能需要这样做。

在jQuery中的类似以下代码中，其中table是您的输入表：

var trs = $(table).find("tr");
var numberColumns = 999;
if (trs.length === 1) {
    //Assume having one row means that there is a header
    var headerColumns = $(trs).find("th").length;
    if (headerColumns > 0) {
        numberColumns = headerColumns;
    }
}
与此前发布的JavaScript解决方案一样，这个解决方案也不太适用于通用情况；因为有些列可能设置了colspan，所以th的数量并不一定等于列数，因此这个解决方案不能直接套用。 - Mark Amery
-5
colspan="100%"

它也适用于电子邮件Outlook，Gmail等...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接