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

使用以下代码

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

Answer 2

我假设rowspan与colspan相同。请注意，如果这是真的，那么＆＃34;合并＆＃34; <td>就像他们对colspan一样成为一个<td>。 Rowspan和colspan没有＆＃34;合并＆＃34;后续的tds，它们只是告诉它们应用它们的当前消耗指定的cols /行数的空间。

选中此示例以了解rowspan的工作原理：

＆＃13;

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

＆＃13;

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

如何在html表中合并2行

3 个答案: