React实现带状态控制的跨列单行透明文本覆盖表格

完整实现代码 #

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

const TableWithStatus = () => {
  // 模拟表格数据，包含状态字段
  const tableData = [
    { id: 1, name: '项目A', status: 'suspended', progress: '60%' },
    { id: 2, name: '项目B', status: 'close', progress: '100%' },
    { id: 3, name: '项目C', status: 'open', progress: '30%' },
    { id: 4, name: '项目D', status: 'suspended', progress: '75%' },
  ];

  return (
    <table className="status-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>项目名称</th>
          <th>进度</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map(item => (
          <tr key={item.id} className="table-row">
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.progress}</td>
            {/* 仅当状态不为open时渲染覆盖层 */}
            {item.status !== 'open' && (
              <td className="status-overlay" colSpan="3">
                {item.status.toUpperCase()}
              </td>
            )}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default TableWithStatus;

对应的CSS文件 TableWithStatus.css：

.status-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
}

.status-table th, .status-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

.status-table th {
  background-color: #f5f5f5;
}

.table-row {
  position: relative;
}

.status-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
  border: none;
  padding: 0;
  z-index: 10;
}

关键说明 #

• 表格行设置position: relative，为绝对定位的状态覆盖层提供定位基准
• 状态覆盖层用colspan="3"确保跨列，同时通过绝对定位占满整行空间
• 利用rgba设置半透明背景，既突出状态文本，又不遮挡下方表格内容
• 通过条件渲染，仅在状态为suspended或close时显示覆盖层，open状态自动隐藏

内容的提问来源于stack exchange，提问作者Pratik Vyavahare