react-bootstrap Table组件样式设置

React-Bootstrap 的 `Table` 组件是 Bootstrap 的 `table` 元素的 React 实现，所以可以通过 Bootstrap 的样式类来设置样式。

以下是一些常用的样式类：

- `table`: 基础样式类，将表格的边框和宽度设置为默认值。
- `table-striped`: 交替显示行背景色。
- `table-bordered`: 显示表格边框。
- `table-hover`: 鼠标悬停时高亮显示行。
- `table-sm`: 缩小表格的边框和字体大小。
- `thead-dark` 和 `thead-light`: 设置表头的背景色和文字颜色。
- `text-center`、`text-right` 和 `text-left`: 设置文本的对齐方式。

可以将这些样式类作为 `Table` 组件的 `className` 属性值，例如：

import Table from 'react-bootstrap/Table';

function MyTable() {
  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th className="text-center">ID</th>
          <th>Name</th>
          <th className="text-right">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Product 1</td>
          <td className="text-right">$10.99</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Product 2</td>
          <td className="text-right">$24.99</td>
        </tr>
      </tbody>
    </Table>
  );
}