Question

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

不是计算正在使用的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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

结论是，生成表格的代码应计算列数并将正确的特定数字放入colspan属性。

使用过多的colspan有什么潜在的缺点？

1 个答案: