舉例說明表格中如何再巢狀表格

王铁柱6發表於2024-11-29
巢狀

前端開發中，在表格中巢狀表格通常不是最佳實踐，因為它會使 HTML 結構複雜化，難以維護和樣式化，並且可能導致佈局問題，尤其是在響應式設計中。更推薦使用其他方法來呈現複雜的資料結構，例如使用 <div> 和 CSS Grid 或 Flexbox 來建立更靈活的佈局。

不過，如果確實需要在表格中巢狀表格，以下是幾種方法及其示例：

1. 直接巢狀 <table> 元素:

這是最直接的方法，只需將一個 <table> 元素放在另一個 <table> 元素的單元格 (<td> 或 <th>) 中即可。

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>Nested Table Cell 1</td>
          <td>Nested Table Cell 2</td>
        </tr>
        <tr>
          <td>Nested Table Cell 3</td>
          <td>Nested Table Cell 4</td>
        </tr>
      </table>
    </td>
    <td>Outer Table Cell 2</td>
  </tr>
</table>

這種方法簡單，但可能會導致樣式和佈局問題，需要仔細調整 CSS。

2. 使用 <div> 容器:

為了更好地控制巢狀表格的樣式和佈局，可以將巢狀的 <table> 元素放在一個 <div> 容器中，然後將該 <div> 放在外部表格的單元格中。

<table>
  <tr>
    <td>
      <div class="nested-table-container">
        <table>
          <tr>
            <td>Nested Table Cell 1</td>
            <td>Nested Table Cell 2</td>
          </tr>
          <tr>
            <td>Nested Table Cell 3</td>
            <td>Nested Table Cell 4</td>
          </tr>
        </table>
      </div>
    </td>
    <td>Outer Table Cell 2</td>
  </tr>
</table>

<style>
.nested-table-container {
  /*  新增樣式以控制巢狀表格的大小和位置 */
  width: 100%;
  overflow: auto; /*  如果巢狀表格內容超出容器，則顯示捲軸 */
}
</style>

這種方法允許更靈活地控制巢狀表格的樣式，例如設定寬度、高度、溢位等。

3. 避免巢狀，使用行跨列合併:

很多時候，巢狀表格的需求可以透過更合理的表格結構設計來避免。例如，使用 rowspan 和 colspan 屬性來合併單元格，從而建立更復雜的佈局。

<table>
  <tr>
    <td rowspan="2">Outer Table Cell 1</td>
    <td>Outer Table Cell 2</td>
    <td>Outer Table Cell 3</td>
  </tr>
  <tr>
    <td>Outer Table Cell 4</td>
    <td>Outer Table Cell 5</td>
  </tr>
</table>

這種方法可以簡化 HTML 結構，提高程式碼可讀性和可維護性，並且更容易實現響應式設計。

總結: 雖然技術上可以在表格中巢狀表格，但通常不推薦這樣做。 儘量使用更簡潔、更靈活的佈局方法，例如 <div> 和 CSS Grid 或 Flexbox，或者透過 rowspan 和 colspan 來最佳化表格結構。 選擇哪種方法取決於具體的場景和需求。 如果必須巢狀表格，使用 <div> 容器可以更好地控制樣式和佈局。

相關文章