javascript - 在 html 表中的父行下生成子行

Question

你好，我无法创建一个 html 表格，其中父行下会有子行，每一行将被视为表格下的主行。我不擅长 html 我可以做一个 html 表格并删除行的边框，但实际上我只能制作一个没有用的简单表格，这就是为什么我没有添加任何代码，对此我深表歉意。我附上了我的表格图片想要创建。这里“A”是父行，“A1”，“A2”，“A3”是子行，A 将是父行，因为我将进一步编写基于此表的服务器端代码。

<table>
<tr>
<td>A</td>
<td>A1</td>
<td>A2</td>
</tr>
<tr class="noBorder">
<td>B</td>
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C</td>
<td>C1</td>
<td>C2</td>
</tr>
</table>

 //**Css
 table, tr, td {
 border: 3px solid red;
 }
 tr.noBorder td {
 border: 0;
 }

请专家提供帮助。谢谢

Answer 1

Rowspan 将为您工作

请引用以下内容

<table class="table" border="1">
        <thead>
            <tr>
                <th>Sr</th>
                <th>Title</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">1</td>
                <td >Hello</td>
                <td >Hello How Are You</td>
            </tr>
            <tr>
                <td>Hello 2</td>
                <td>Hello How Are You 2</td>
            </tr>
            <tr>
                <td>Hello 3</td>
                <td>Hello How Are You 3</td>
            </tr>

            <tr>
                <td rowspan="3">2</td>
                <td >Hello</td>
                <td >Hello How Are You</td>
            </tr>
            <tr>
                <td>Hello 2</td>
                <td>Hello How Are You 2</td>
            </tr>
            <tr>
                <td>Hello 3</td>
                <td>Hello How Are You 3</td>
            </tr>
        </tbody>
     </table>