如何在选项卡面板中同时显示表格和图形？

<ul class="tabs">
  <li class="tab active">表格</li>
  <li class="tab">图形</li>
</ul>

<div class="tab-content">
  <div class="tab-pane active">
    <!-- 表格内容 -->
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>数据1</td>
          <td>数据2</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="tab-pane">
    <!-- 图形内容 -->
    <canvas id="chart"></canvas>
  </div>
</div>

.tabs {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  cursor: pointer;
}

.tab.active {
  background-color: #f00;
  color: #fff;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

// 获取选项卡导航和内容区域的元素
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

// 为选项卡导航添加点击事件监听
tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    // 切换选项卡的激活状态
    tabs.forEach((tab) => {
      tab.classList.remove('active');
    });
    tab.classList.add('active');

    // 切换对应内容区域的显示状态
    tabContents.forEach((content) => {
      content.classList.remove('active');
    });
    tabContents[index].classList.add('active');
  });
});