如何合并/组合没有colspan的HTML表格单元格

Question

我需要在HTML表格中合并中心单元格，但<td colspan="3" rowspan="3">&nbsp;</td>无法正常工作。下图显示了当我使用colspan和rowspan时会发生什么 - 它会弄乱桌子。

如何在不使用colspan的情况下合并上述图像等9个单元格。我真的想要组合表格单元格，以便它们不会扩展。我可以使用HTML来实现吗？还是需要使用jQuery解决方案？

Answer 1

colspan是正确的做法。您遇到的问题是您添加了比预期更多的列。每次使用超过1的colspan时，都需要从该行中删除相应数量的<td>标记。另外，请记住，使用rowspan有效地为跨度所涵盖的每一行添加<td>。因此，当您执行colspan="3" rowspan="3"时，您需要从包含跨区单元格的行中敲出2个单元格，并在下一个两个行中敲掉3个单元格。

如果你的10x10桌子上有3x3洞，你需要这个

<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan="3" rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<强> 修改

我感到慷慨和无聊，所以这里有一些PHP。您可以调整spansize和cellMax值，一切都应该继续工作。虽然粗糙的边缘。我没有尝试过一切可能的方法来打破它。

<?php
function draw_table_with_hole($rows, $cols, $span_start_row, $span_start_col, $span_rows, $span_cols) {
    $spanning = 0;
    for ($row = 0; $row < $rows; $row++) {
        if (--$spanning > 0) {
            $cell = $span_cols;
        } else {
            $cell = 0;
        }
        echo "<tr>";
        for (; $cell < $cols; $cell++) {
            $cell_code = "<td>&nbsp;</td>";

            if ($row === $span_start_row && $cell === $span_start_col) {
                $cell_code = '<td colspan="' . $span_cols . '" rowspan="' . $span_rows . '.">&nbsp;</td>';
                $cell += ($span_cols - 1);
                $spanning = $span_rows;
            }

            echo $cell_code;
        }
        echo "</tr>";
    }
}
?>
<table>
     <?php draw_table_with_hole(10, 10, 3, 4, 3, 3); ?>
</table>