使用过多的 colspan 的潜在缺点是什么？答案

【问题标题】：What is the potential drawback in using excessive colspan?使用过多的 colspan 的潜在缺点是什么？
【发布时间】：2015-03-08 14:37:55
【问题描述】：

在动态生成的表中（即列数是可变的），并且在特定行上，我希望它跨越整行。

我没有计算使用的cols的数量，而是使用一些随机的大数作为colspan，有什么缺点吗？

 <table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">no enough colspan</td>
    </tr>       
    <tr>
      <td colspan="9999"> should cover the whole row no matter the no. of col. </td>
    </tr>
  </tbody>
</table>

http://www.bootply.com/ot3l8CrJQ9

【问题讨论】：

如果你还是动态生成表，为什么只计算列数这么难？在我看来，这似乎是一种寻找问题的解决方案（更像是一种 hack），同时它本身可能会产生不必要的问题。
为什么用 twitter-bootstrap 和 twitter-bootstrap-3 标记？

标签： html css twitter-bootstrap twitter-bootstrap-3 html-table

【解决方案1】：

有几个缺点。如果标记指定了实际上不存在的列（其中没有单元格开始），则它违反了 HTML 表格模型。这可能会导致多种奇怪现象。例如，MDN says 表示“高于 1000 的值将被视为不正确，并将设置为默认值 (1)。”这不是基于规范，但至少 Firefox 是这样做的；所以你的colspan="9999" 被视为colspan="1"。其他一些浏览器可能会设置一个下限，因此将该值降低到 1000 不一定有帮助。

“假列”也会导致样式问题。假设在某个时候，您或其他人在您创建的页面上工作，希望有固定的表格布局，将可用空间均匀地划分为列。当colspan 创建了假列时，这将失败，因为它们被计入分配：

table {
  width: 100%;
  table-layout: fixed;
}

<table border>
  <thead>
    <tr>
      <th>#</th>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Covers all the 4 columns.</td>
    </tr>
  </tbody>
</table>

<p>Even division fails when there are fake columns:

<table border>
  <thead>
    <tr>
      <th>#</th>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="9">should cover the whole row no matter the no. of col.</td>
    </tr>
  </tbody>
</table>

<p>It fails even worse if you have used a very large `colspan` value “for safety”:

<table border>
  <thead>
    <tr>
      <th>#</th>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="999">should cover the whole row no matter the no. of col.</td>
    </tr>
  </tbody>
</table>

根据 HTML 4.01，colspan="0" 应该（在这样的简单情况下）意味着使值等于所有列的数量。但是，只有 Firefox 实现了这一点。

结论是您生成表格的代码应该计算列并将正确的具体数字放入colspan 属性中。

【讨论】：