css - 在主表行中将表居中

我正在工作的页面上，在每一行的第一个单元格中都显示了所有带有“ +”号的父记录，单击子记录（这是另一个表）时，应在其上显示父行（完成后）使用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

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

最佳答案

您只有<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>

关于css - 在主表行中将表居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19160746/