如何合并html表格中的2行答案

【问题标题】：How to merge 2 rows in a html table如何合并html表格中的2行
【发布时间】：2013-06-28 14:22:27
【问题描述】：

我想合并表格中的 2 行，我已经合并了 2 行，但我不知道如何合并表格的第一行和第二行..

我想在这个方案中合并我的行

|---------------------------|
|            row1           |
|---|                   |---|
cell|        row2       | cell
|---|                   |---|
|            row3           |
|---------------------------|

但我只能这样合并它们

|---------------------------|
|            row1           |
|---|-------------------|---|
cell|        row2       | cell
|---|                   |---|
|            row3           |
|---------------------------|

如果我再次尝试使用 rowspan，我不会得到我想要的结果！我的整个代码是：

<!DOCTYPE html>
<html>
<body>
<table border=1px>


<tr class="tr_top" >
    <td colspan = "3"  >1</td>
</tr>

<tr class="tr_middle" >
    <td width=7% style="background-color:transparent;">c</td>
    <td rowspan="2">2</td>
    <td width=7% style="background-color:transparent;">c</td>
</tr>

<tr class="tr_down">
    <td colspan = "3" >3</td>
</tr>
</table>

</body>
</html>

有人知道吗？比你提前的帮助！

【问题讨论】：

您是否尝试将第一行合并到已合并的第二行和第三行？
是的，这就是我正在尝试的...
好吧，我正在为您解答，但与此同时，您可能需要查看this。它是我工作的基础。尽管从这一点以及我迄今为止尝试过的情况来看，我不确定您能否实现您的确切格式
非常感谢，我也在处理你给我的材料:)

标签： html merge row html-table

【解决方案1】：

使用下面的代码

<!DOCTYPE html>
<html>
<body>
<table border=1px>


<tr class="tr_top" >
    <td colspan = "3"  >1</td>
</tr>

<tr class="tr_middle" >
    <td width=7% style="background-color:transparent;">c</td>
    <td >2</td>
    <td width=7% style="background-color:transparent;">c</td>
</tr>

<tr class="tr_down">
    <td colspan = "3" >3</td>
</tr>
</table>

</body>
</html>

【讨论】：

感谢您的回复，但此示例没有合并我的行：/

【解决方案2】：

我假设 rowspan 的工作方式与 colspan 相同。请注意，如果这是真的，“合并的”<td> 会变成 ONE <td>，就像他们对 colspan 所做的那样。 Rowspan 和 colspan 不会“合并”后续的 td，它们只是告诉当前应用它们以消耗指定的列数/行数的空间。

查看此示例以了解行跨度的工作原理：

<!DOCTYPE html>
<html>

<head>
  <title>Combining cells in a table rowise - rowspan</title>
</head>

<body>

  <table border="1">
    <tr>
      <td rowspan="2">Kindergarten consists of</td>
      <td>Kinder</td>
    </tr>
    <tr>
      <td>+ Garten</td>
    </tr>
    <tr>
      <td rowspan="2">Blitzkrieg consists of</td>
      <td>Blitz</td>
    </tr>
    <tr>
      <td>+ Krieg</td>
    </tr>
  </table>
</body>

</html>

【讨论】：

【解决方案3】：

您可以使用 html 和一些 css 来实现这一点

html

<body>
<table>
<tr class="tr_top" >
    <td colspan = "3">1</td>
</tr>
<tr>
    <td class="tdBorder" width=7%> c</td>
    <td >2</td>
    <td class="tdBorder" width=7%>c</td>
</tr>
<tr class="tr_down">
    <td colspan = "3" >3</td>
</tr>
</table>
</body>

css

table{
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-collapse: collapse;
}

.tr_top{
    border-top: 1px solid black;
}

.tr_down{
    border-bottom: 1px solid black;
}

.tdBorder{
    border: 1px solid black;
}

td{
    text-align: center;
}

在这里查看https://jsfiddle.net/1fbe87r5/

【讨论】：