css - 在主表的一行中居中一个表

Question

我在一个页面上工作，我们在每行的第一个单元格中显示所有带有“+”符号的父记录，单击子记录(这是另一个表)应显示在父记录下方行(使用 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

对于某些人，我也无法在 fiddle 的表格中显示第 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>