为我的响应式项目制作带有div基本结构的表格

<div id="table-container">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

#table-container {
  width: 100%;
  overflow-x: auto; /* 水平滚动条 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 600px) {
  /* 在小屏幕上隐藏表格的某些列或调整样式 */
}

<table>
  <tr>
    <th>列标题1</th>
    <th>列标题2</th>
    <th>列标题3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
  <!-- 添加更多行 -->
</table>

@media screen and (max-width: 600px) {
  th, td {
    display: block;
    width: 100%;
  }
  /* 隐藏某些列或调整样式 */
}