React表中的垂直标题

import React from 'react';
import './VerticalTable.css';

const VerticalTable = () => {
  const data = [
    { name: 'Alice', age: 25, city: 'New York' },
    { name: 'Bob', age: 30, city: 'Los Angeles' },
    { name: 'Charlie', age: 35, city: 'Chicago' },
  ];

  const columns = ['Name', 'Age', 'City'];

  return (
    <div className="vertical-table">
      <div className="header">
        {columns.map((column, index) => (
          <div key={index} className="header-item">
            {column}
          </div>
        ))}
      </div>
      <div className="body">
        {data.map((row, rowIndex) => (
          <div key={rowIndex} className="row">
            {columns.map((column, colIndex) => (
              <div key={colIndex} className="cell">
                {row[column.toLowerCase()]}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};

export default VerticalTable;

.vertical-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 10px;
}

.header-item {
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 5px;
}

.body {
  overflow-y: auto;
  flex: 1;
}

.row {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.cell {
  flex: 1;
  padding: 10px;
}