1

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

有谁有想法吗？比你提前为你的帮助！

4

3 回答 3

4

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

检查此示例以了解 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>

于 2015-01-19T19:02:34.297 回答
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>
于 2013-07-01T12:56:28.977 回答
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/

于 2015-11-11T04:56:23.530 回答