Question

我正在一个页面上，我们在每行的第一个单元格中显示所有父记录，并带有一个“+”符号，点击哪个子记录（这是另一个表）应显示在父级下方row（使用jQuery完成）。我能够显示子行，但我无法将子表置于父行下方。

<table border='2'>
    <tr>
        <th>Parent Column 1</th>
        <th>Parent column 2</th>
        <th>Parent Column 3</th>
        <th>Parent column 4</th>
    </tr>
    <tr>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
    </tr>
    <tr>
        <table border='1' style="text-align:center;position:relative;">
            <tr>
                <th>Child Column 1</th>
                <th>Child column 2</th>
            </tr>
            <tr>
                <td>item 1</td>
                <td>item 2</td>
            </tr>
        </table>
    </tr>
    <tr>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
    </tr>
</table>

您可以看到fiddle here

对于某些人来说，我也无法在小提琴表中显示第3行。

Answer 1

您只有<tr>而没有<td>，因此您的HTML结构错误。所以你需要添加<td colspan="4" align="center">CHILD TABLE CODE HERE</td>

签入Fiddle here

那样：

<table border='2'>
<tr>
    <th>Parent Column 1</th>
    <th>Parent column 2</th>
    <th>Parent Column 3</th>
    <th>Parent column 4</th>
</tr>
<tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
    <td>item 4</td>
</tr>
<tr>
    <td colspan="4" align="center">
    <table border='1'>
        <tr>
            <th>Child Column 1</th>
            <th>Child column 2</th>
        </tr>
        <tr>
            <td>item 1</td>
            <td>item 2</td>
        </tr>
    </table>
    </td>
</tr>
<tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
    <td>item 4</td>
</tr>

Answer 2

将嵌套表包装在内部，并将内联样式应用于margin: 0 auto;的嵌套表，这是嵌套表的中心

<table border='2'>
    <tr>
        <th>Parent Column 1</th>
        <th>Parent column 2</th>
        <th>Parent Column 3</th>
        <th>Parent column 4</th>
    </tr>
    <tr>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
    </tr>
    <tr>
      <td colspan="4" style="text-align:center">
        <table border='1' style="margin: 0 auto;">
            <tr>
                <th>Child Column 1</th>
                <th>Child column 2</th>
            </tr>
            <tr>
                <td>item 1</td>
                <td>item 2</td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
    </tr>
</table>

将表放在主表的一行中

2 个答案: