React中react-bootstrap Table空数据时tbody替换为居中文字的实现问题

解决方法 #

你出现多余边框的核心原因是写了3个空<td>，react-bootstrap的Table默认会给所有<td>加边框样式，额外的空<td>自然会带多余边框，加上你用了position: absolute的非常规写法，也会导致排版错位。

直接用表格原生的colspan属性就能实现需求，修改空状态下的<tbody>代码即可：

<tbody>
  <tr>
    <td 
      colSpan={3} 
      style={{ 
        textAlign: "center",
        border: "none", // 直接覆盖默认边框样式，无需!important
        padding: "2rem 0", // 调整上下内边距控制垂直位置，按需修改
      }}
    >
      No Match Events Yet...
    </td>
  </tr>
</tbody>

如果需要让文字在整个Card中垂直居中，可以额外做以下修改：

• 给外层<Card>添加bootstrap工具类className="d-flex flex-column"
• 给<Table>添加工具类className="flex-grow-1"
• 给空状态的<td>添加样式verticalAlign: "middle"

修改后完全符合HTML表格规范，不会有多余边框，也不用写非常规的定位样式。

内容的提问来源于stack exchange，提问作者clattenburg cake