0

我正在处理一个页面，我们在每行的第一个单元格中显示所有带有“+”号的父记录，单击子记录（这是另一个表）应该显示在父行下方（完成使用 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>

你可以在这里看到小提琴

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

4

2 回答 2

1

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

在这里检查小提琴

就像这样：

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

于 2013-10-03T13:49:39.117 回答
1

将您的嵌套表格包裹在内部并将内联样式应用于您的嵌套表格，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>
于 2013-10-03T13:50:53.860 回答