我需要合并 HTML 表中的中心单元格，但 <td colspan="3" rowspan="3"> </td> 无法按预期工作。下图显示了当我使用 colspan 和 rowspan 时会发生什么 - 它弄乱了表格。
我应该如何在不使用 colspan 的情况下合并 9 个像上图这样的单元格。我真的很想组合表格单元格，这样它们就不会扩展。我可以使用 HTML 还是我需要使用 jQuery 解决方案？
最佳答案
colspan 是正确的做法。您遇到的问题是您添加的列数超出预期。每次使用大于 1 的 colspan 时，都需要从该行中敲出相应数量的 <td> 标签。另外，请记住，使用 rowspan 可以有效地将 <td> 添加到跨度覆盖的每一行。因此，当您执行 colspan="3" rowspan="3" 时，您需要从包含跨区单元格的行中删除 2 个单元格，并从接下来的两行中删除三个单元格。
对于带有 3x3 孔的 10x10 table ，您需要这个
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3" rowspan="3"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>";
if ($row === $span_start_row && $cell === $span_start_col) {
$cell_code = '<td colspan="' . $span_cols . '" rowspan="' . $span_rows . '."> </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>
关于html - 如何在没有 colspan 的情况下合并/组合 HTML 表格单元格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19186757/