在一張主表中居中一張表

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

對於一些我無法顯示在小提琴表中的第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>