Question

我想创建一个像：

的表

T1----T2----T3
--------------
      B1
A1    B2    C1
      B3

我使用以下代码：

   <table class="table">
        <thead>
            <tr>
                <th>T1</th>
                <th>T2</th>
                <th>T3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">A1</td>
                <tr>
                    <td>B1</td>
                    <tr>
                        <td>B2</td>
                    </tr>
                    <td>C1</td>
                </tr>
        </tbody>
    </table>

演示：https://jsfiddle.net/90yegr6f/

我有 C1 的问题。怎么解决这个问题？

Answer 1

您需要专注于一次做一行。处理第一行中的所有内容。然后开始一个新行并处理其中的所有内容。

所以第一行包含A1，B1和C1。

<tr>
    <td>A1
    <td>B1
    <td>C1

第二行仅包含B2

<tr>
    <td>B2

等等。

现在，您希望第一行的第一个和最后一个单元格跨越多行：

<tr>
    <td rowspan=3>A1
    <td>B1
    <td rowspan=3>C1

这给了你：

＆＃13;

<table class=table>
  <thead>
    <tr>
      <th>T1
      <th>T2
      <th>T3
  <tbody>
    <tr>
      <td rowspan=3>A1
      <td>B1
      <td rowspan=3>C1      
    <tr>
      <td>B2
    <tr>
      <td>B3
</table>

＆＃13;

HTML表格 - 如何正确使用rowspan？

1 个答案: