React:如何在移动视图中将<td>折叠为<tr>中的列

import React from 'react';

class TableCell extends React.Component {
  render() {
    return (
      <td>{this.props.content}</td>
    );
  }
}

class TableRow extends React.Component {
  render() {
    const isMobile = window.innerWidth <= 768; // 假设移动设备宽度小于等于768px为移动视图
    return (
      <tr>
        {isMobile ? (
          <>
            <th>{this.props.header}</th>
            <TableCell content={this.props.content} />
          </>
        ) : (
          <>
            <th>{this.props.header}</th>
            <td>{this.props.content}</td>
          </>
        )}
      </tr>
    );
  }
}

// 在其他地方使用
class MyTable extends React.Component {
  render() {
    return (
      <table>
        <tbody>
          <TableRow header="Header 1" content="Content 1" />
          <TableRow header="Header 2" content="Content 2" />
          {/* 其他行... */}
        </tbody>
      </table>
    );
  }
}