響應表，可能爲嵌套的表單元格寬度繼承

Question

我有一個響應表，每行有不同的內容和每行有六角琴機制。

六角手風琴實際上增加了當前行下方的另一個表格行，該表格中的單元格數量與表格中的單元格數量相關。

在這個六角手風琴內部我有另一個表，我需要表格單元格與父表格對齊。我很欣賞這可能是不可能單獨使用HTML/CSS，可能需要用JS完成？

或者還有另外一種方法嗎？

我不能在這裏，但這裏後我的所有代碼都是我的意思

<table class="parent-table"> 
<tr> 
    <td>Cell 1</td> 
    <td>Cell 2</td> 
    <td>Cell 3</td> 
    <td>Cell 4</td> 
    <td>Cell 5</td> 
    <td>Cell 6</td> 
</tr> 
<tr> 
    <td colspan="6" class="concertina"> 
     <div> 
      <table> 
       <tr> 
        <td>Other 1</td> 
        <td>Other 2</td> 
        <td>Other 3</td> 
        <td>Other 4</td> 
        <td>Other 5</td> 
        <td>Other 6</td> 
       </tr> 
      </table> 
     </div> 
    </td> 
</tr> 

Answer 1

簡短的答案是'不'，不可能只是使用HTML/CSS。我自己正在製作一個固定標題，帶可調整大小的列的可滾動表格，再加上雙擊列標題邊框來自動調整。這遠遠沒有完成，我可以告訴你，如果這大致是你可能前進的方向，那麼你可能需要深吸一口氣。

最新通報低於

從截圖來看，你有沒有考慮改變HTML結構？

從下面的標記可以看出，您有多個<tbody>部分，每個部分都有第一個<tr>，其中包含<th>元素。其餘的將顯示細節數據，包含典型的<td>元素的行<tr>。

在jQuery中，您可以使用$('tr:has(th)')來選擇標題行，並使用$('tr:has(td)')來選擇數據行。

標題中的最後一個<th>將包含您的「更多/更少」控件，該控件只顯示/隱藏後續數據行。

這會爲你工作嗎？

<table class="master-table"> 
    <tbody class="concertina"> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
      <th>Header 3</th> 
      <th>Header 4</th> 
      <th>Header 5</th> 
      <th>Header 6</th> 
      <th>More</th> 
     </tr> 
     <tr> 
      <td>Cell 1</td> 
      <td>Cell 2</td> 
      <td>Cell 3</td> 
      <td>Cell 4</td> 
      <td>Cell 5</td> 
      <td colspan="2">Cell 6</td> 
     </tr> 
    </tbody> 
    <tbody class="concertina"> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
      <th>Header 3</th> 
      <th>Header 4</th> 
      <th>Header 5</th> 
      <th>Header 6</th> 
      <th>More</th> 
     </tr> 
     <tr> 
      <td>Cell 1</td> 
      <td>Cell 2</td> 
      <td>Cell 3</td> 
      <td>Cell 4</td> 
      <td>Cell 5</td> 
      <td colspan="2">Cell 6</td> 
     </tr> 
    </tbody> 
</table> 

Answer 2

截圖使用此位的CSS重置您的表：

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

然後你將不得不設置的寬度<td> s