如何使用 CSS 美化这个可拖动和排序的 React 表格？

以下是一些使用CSS来美化上述可拖动和排序的React表格的常见方法和示例代码。

整体表格样式

给表格添加一些基本的样式，使其看起来更整洁美观。例如：

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

这里设置了表格的边框合并、宽度为100%、底部间距以及添加了一个淡淡的阴影效果。

表头样式

• 背景色和文字颜色：

thead {
  background-color: #f2f2f2;
  color: #333;
}

给表头设置一个浅灰色的背景色和深灰色的文字颜色，使其与表格内容区分开来。

• 边框：

thead th {
  border: 1px solid #ddd;
  padding: 10px;
}

为表头的每个单元格添加边框和内边距，让表头看起来更清晰。

表格内容样式

• 文字对齐：

tbody td {
  text-align: center;
  border: 1px solid #ddd;
  padding: 10px;
}

将表格内容的文字设置为居中对齐，并添加边框和内边距，使其与表头风格保持一致。

正在拖动时的表头样式

当表头正在被拖动时，可以通过改变其外观来提供视觉反馈。例如：

thead.th.dragging {
  opacity: 0.7;
  background-color: #e6e6e6;
}

这里将正在拖动的表头单元格设置为半透明，并稍微改变其背景色，让用户清楚地知道当前正在进行拖动操作。

排序图标样式（假设使用了类似箭头的图标来表示排序方向）

如果在表头中添加了排序图标（如示例代码中的⇄字符），可以对其进行样式设置。例如：

th.sort-icon {
  margin-left: 5px;
  font-size: 12px;
  color: #999;
}

设置了排序图标与表头文字的间距、字体大小以及颜色，使其更加协调美观。

响应式设计（可选）

为了让表格在不同设备上都有较好的显示效果，可以添加一些响应式样式。例如，当屏幕较小时，可以让表格内容自适应宽度并隐藏部分表头文字，用省略号代替：

@media (max-width: 600px) {
  tbody td,
  thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
  }
}

将上述CSS代码添加到你的项目中，可以通过在React组件中导入CSS文件（例如使用 import './styles.css';）或者在 style 标签内直接编写（在HTML或类似 index.html 的文件中）等方式来应用这些样式到表格上，具体取决于你的项目架构和需求。这样就能让可拖动和排序的React表格在外观上更加美观和易用。