如何合并html表中的两行

Question

我想在表格中合并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>

有谁知道吗？比你提前感谢你的帮助！

Answer 1

您可以使用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/

Answer 2

我假设rowspan的工作原理与colspan相同。请注意，如果这是真的，那么“合并”的<td>就会变成一个<td>，就像它们对colspan所做的那样。Rowspan和colspan不会“合并”后续的to，它们只是告诉当前应用它们的对象，以消耗指定数量的cols/rows的空间。

查看此示例以了解rowspan是如何工作的：

​

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

​

Answer 3

使用以下代码

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